Skip to content

Commit

Permalink
Merge pull request liferay#3264 from bryceosterhaus/3262
Browse files Browse the repository at this point in the history
feat(@clayui/date-picker): add props to control expand functionality
  • Loading branch information
bryceosterhaus authored May 21, 2020
2 parents 87c2b5a + 1ec1255 commit c34a742
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 6 deletions.
4 changes: 4 additions & 0 deletions packages/clay-date-picker/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,10 @@ To customize the Date Picker content footer you can use the [`footerElement`](#a

<DatePickerCustomFooter />

## Programatically Expand Dropdown

If you want to expand or close the picker from outside of the component, use the props `expand` and `onExpandChange`.

## API

<div>[APITable "clay-date-picker/src/index.tsx"]</div>
38 changes: 32 additions & 6 deletions packages/clay-date-picker/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ interface IProps extends React.HTMLAttributes<HTMLInputElement> {
id?: string;

/**
* Flag to indicate if date is expanded.
* Flag to indicate if date is initially expanded when
* `expand` and `onExpandChange` are not being used.
*/
initialExpanded?: boolean;

Expand All @@ -85,8 +86,13 @@ interface IProps extends React.HTMLAttributes<HTMLInputElement> {

/**
* Called when the input change.
*
* Second argument gives the type that caused the value change
*/
onValueChange: (value: Date | string) => void;
onValueChange: (
value: Date | string,
type?: 'click' | 'input' | 'time'
) => void;

/**
* Describe a brief tip to help users interact.
Expand Down Expand Up @@ -128,6 +134,16 @@ interface IProps extends React.HTMLAttributes<HTMLInputElement> {
* List of years available for navigation within the selector.
*/
years?: IYears;

/**
* Determines if menu is expanded or not
*/
expanded?: boolean;

/**
* Callback for when dropdown changes its active state
*/
onExpandedChange?: (val: boolean) => void;
}

const DateNow = new Date();
Expand All @@ -149,6 +165,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
},
dateFormat = 'YYYY-MM-DD',
disabled,
expanded,
firstDayOfWeek = 0,
footerElement,
id,
Expand All @@ -169,6 +186,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
'November',
'December',
],
onExpandedChange,
onNavigation = () => {},
onValueChange = () => {},
placeholder,
Expand Down Expand Up @@ -226,7 +244,15 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
/**
* Flag to indicate if date is expanded.
*/
const [expanded, setExpanded] = React.useState(initialExpanded);
const [internalExpanded, setInternalExpanded] = React.useState(
initialExpanded
);

expanded = expanded !== undefined ? expanded : internalExpanded;

const setExpanded = onExpandedChange
? onExpandedChange
: setInternalExpanded;

/**
* Create a ref to store the datepicker DOM element
Expand Down Expand Up @@ -260,7 +286,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
*/
const handleDayClicked = (date: Date) => {
setDaySelected(date);
onValueChange(date);
onValueChange(date, 'click');
};

/**
Expand All @@ -283,7 +309,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
}
}

onValueChange(value);
onValueChange(value, 'input');
};

/**
Expand All @@ -304,7 +330,7 @@ const ClayDatePicker: React.FunctionComponent<IProps> = React.forwardRef<
// Hack to force InputDate to add `currentTime` to the value of
// the input when the value was edited by the user.
if (typeof value === 'string' && moment(value, format).isValid()) {
onValueChange(moment(value, format).toDate());
onValueChange(moment(value, format).toDate(), 'time');
}

setCurrentTime(hours, minutes);
Expand Down
34 changes: 34 additions & 0 deletions packages/clay-date-picker/stories/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,40 @@ storiesOf('Components|ClayDatePicker', module)
}}
/>
))
.add('w/ custom expand', () => {
const [expanded, setExpanded] = React.useState(false);
const [value, setValue] = React.useState<string | Date>('');

return (
<>
<button onClick={() => setExpanded(true)}>
{'Open Picker'}
</button>

<br />
<br />

<ClayDatePicker
expanded={expanded}
onExpandedChange={setExpanded}
onValueChange={(val, type) => {
setValue(val);

if (type === 'click') {
setExpanded(false);
}
}}
placeholder="YYYY-MM-DD"
spritemap={spritemap}
value={value as string}
years={{
end: 2024,
start: 1997,
}}
/>
</>
);
})
.add('native', () => (
<ClayDatePickerWithState
placeholder="YYYY-MM-DD"
Expand Down

0 comments on commit c34a742

Please sign in to comment.