IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

datepicker's props were updated according to new calendar

Browse Source
This commit is contained in:
Vladimir Khvan 2023-03-08 15:22:18 +05:00
parent cc879cecab
commit 1e36bef9fc
3 changed files with 8 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/components/date-picker/README.md
View File

@ -30,7 +30,6 @@ import DatePicker from "@docspace/components/date-picker";
| Props | Type | Required | Values | Default | Description |
| ----------------------- | -------------- | :------: | --------------------------- | ------------------------- | -------------------------------------------------- |
| `calendarHeaderContent` | `string` | - | - | - | Calendar header content (calendar opened in aside) |
| `calendarSize` | `oneOf` | - | `base`, `big` | - | Calendar size |
| `className` | `string` | - | - | - | Accepts class |
| `displayType` | `oneOf` | - | `dropdown`, `aside`, `auto` | `auto` | Calendar display type |
| `hasError` | `bool` | - | | - | Set error date-input style |
@ -42,9 +41,8 @@ import DatePicker from "@docspace/components/date-picker";
| `maxDate` | `date` | - | - | `new Date("3000/01/01")` | Maximum date that the user can select. |
| `minDate` | `date` | - | - | `new Date("1970/01/01")` | Minimum date that the user can select. |
| `onChange` | `func` | - | - | - | Function called when the user select a day |
| `openToDate` | `date` | - | - | `(today)` | Opened date value |
| `initialDate` | `date` | - | - | `(today)` | Opened date value |
| `scaled` | `bool` | - | | - | Selected calendar size |
| `selectedDate` | `date` | - | - | `(today)` | Selected date value |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `themeColor` | `string` | - | - | `#ED7309` | Color of the selected day |
| `zIndex` | `number` | - | - | `310` | Calendar css z-index |

9
packages/components/date-picker/date-picker.stories.js
View File

@ -34,9 +34,8 @@ export default {
component: DatePicker,
argTypes: {
themeColor: { control: "color" },
selectedDate: { control: "date" },
openToDate: { control: "date" },
initialDate: { control: "date" },
minDate: { control: "date" },
maxDate: { control: "date" },
onChange: { action: "onChange" },
@ -63,7 +62,7 @@ const Template = (args) => {
selectedDate={new Date(args.selectedDate)}
minDate={new Date(args.minDate)}
maxDate={new Date(args.maxDate)}
openToDate={new Date(args.openToDate)}
initialDate={new Date(args.initialDate)}
/>
</div>
);
@ -73,11 +72,9 @@ export const Default = Template.bind({});
Default.args = {
isOpen: true,
calendarHeaderContent: "Select Date",
themeColor: "#ED7309",
minDate: new Date("1970/01/01"),
selectedDate: new Date(),
maxDate: new Date(new Date().getFullYear() + 1 + "/01/01"),
openToDate: new Date(),
calendarSize: "base",
initialDate: new Date(),
locale: "en",
};

17
packages/components/date-picker/index.js
View File

@ -291,24 +291,19 @@ class DatePicker extends Component {
}
renderBody = () => {
const { isDisabled, minDate, maxDate, locale, themeColor } = this.props;
const { selectedDate, displayType } = this.state;
const { isDisabled, minDate, maxDate, locale, initialDate } = this.props;
const { selectedDate } = this.state;
const calendarRef = this.calendarRef;
let calendarSize;
displayType === "aside" ? (calendarSize = "big") : (calendarSize = "base");
return (
<Calendar
locale={locale}
themeColor={themeColor}
minDate={minDate}
maxDate={maxDate}
isDisabled={isDisabled}
openToDate={selectedDate}
initialDate={initialDate}
selectedDate={selectedDate}
onChange={this.onChange}
size={calendarSize}
setSelectedDate={(date) => this.setState({ selectedDate: date })}
ref={calendarRef}
/>
@ -404,12 +399,10 @@ class DatePicker extends Component {
DatePicker.propTypes = {
/** Function called when the user select a day */
onChange: PropTypes.func,
/** Color of the selected day */
themeColor: PropTypes.string,
/** Selected date value */
selectedDate: PropTypes.instanceOf(Date),
/** Opened date value */
openToDate: PropTypes.instanceOf(Date),
initialDate: PropTypes.instanceOf(Date),
/** Minimum date that the user can select */
minDate: PropTypes.instanceOf(Date),
/** Maximum date that the user can select */
@ -425,8 +418,6 @@ DatePicker.propTypes = {
//hasWarning: PropTypes.bool,
/** Opens calendar */
isOpen: PropTypes.bool,
/** Calendar size */
calendarSize: PropTypes.oneOf(["base", "big"]),
/** Calendar display type */
displayType: PropTypes.oneOf(["dropdown", "aside", "auto"]),
/** Calendar css z-index */