From 4c145487fd154ac19292c3dbe9a41e6f42a40389 Mon Sep 17 00:00:00 2001 From: bzone Date: Thu, 19 Sep 2019 23:08:31 +0800 Subject: [PATCH] feat: add DatePicker Component --- code/Data Entry/DatePicker.MonthPicker.tsx | 83 +++++++++++++++++ code/Data Entry/DatePicker.RangePicker.tsx | 100 +++++++++++++++++++++ code/Data Entry/DatePicker.WeekPicker.tsx | 83 +++++++++++++++++ code/Data Entry/DatePicker.tsx | 88 ++++++++++++++++++ package.json | 5 +- 5 files changed, 357 insertions(+), 2 deletions(-) create mode 100644 code/Data Entry/DatePicker.MonthPicker.tsx create mode 100644 code/Data Entry/DatePicker.RangePicker.tsx create mode 100644 code/Data Entry/DatePicker.WeekPicker.tsx create mode 100644 code/Data Entry/DatePicker.tsx diff --git a/code/Data Entry/DatePicker.MonthPicker.tsx b/code/Data Entry/DatePicker.MonthPicker.tsx new file mode 100644 index 0000000..4611af4 --- /dev/null +++ b/code/Data Entry/DatePicker.MonthPicker.tsx @@ -0,0 +1,83 @@ +import * as React from "react"; +import { + Frame, + addPropertyControls, + ControlType, + RenderTarget, + PropertyControls +} from "framer"; +import { DatePicker as AntDatePicker } from "antd"; +import { keys, pick } from "lodash"; +import { Form as AntForm } from "antd"; +import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem"; +const moment = require("moment"); + +const controlProperty: PropertyControls = { + // 禁用 boolean false + disabled: { type: ControlType.Boolean }, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: { + type: ControlType.Enum, + options: ["time", "date", "month", "year", "decade"] + }, + // 控制弹层是否展开 boolean - + open: { type: ControlType.Boolean }, + // 输入框提示文字 string|RangePicker[] - + placeholder: { type: ControlType.String }, + // 开关大小，可选值：default small string default + size: { + type: ControlType.Enum, + options: ["large", "default", "small"] + }, + + // ------------------------------ + + // 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD" + format: { type: ControlType.String }, + // 日期 moment 无 + _value: { type: ControlType.String }, + + ...FormItemControlProperty +}; + +export const MonthPicker = props => { + const { _labelCol, _wrapperCol, _value, ...rest } = props; + + if (!rest.label) { + return ( + + ); + } + + return ( + + + + ); +}; + +MonthPicker.defaultProps = { + width: 200, + height: 32, + size: "default", + // 禁用 boolean false + disabled: false, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: "date", + // 控制弹层是否展开 boolean - + open: false, + // ------------------------------ + ...FormItemDefaults +}; + +addPropertyControls(MonthPicker, controlProperty); diff --git a/code/Data Entry/DatePicker.RangePicker.tsx b/code/Data Entry/DatePicker.RangePicker.tsx new file mode 100644 index 0000000..274919a --- /dev/null +++ b/code/Data Entry/DatePicker.RangePicker.tsx @@ -0,0 +1,100 @@ +import * as React from "react"; +import { + Frame, + addPropertyControls, + ControlType, + RenderTarget, + PropertyControls +} from "framer"; +import { DatePicker as AntDatePicker } from "antd"; +import { keys, pick, isEmpty } from "lodash"; +import { Form as AntForm } from "antd"; +import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem"; +const moment = require("moment"); + +const controlProperty: PropertyControls = { + // 禁用 boolean false + disabled: { type: ControlType.Boolean }, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: { + type: ControlType.Enum, + options: ["time", "date", "month", "year", "decade"] + }, + // 控制弹层是否展开 boolean - + open: { type: ControlType.Boolean }, + // 输入框提示文字 string|RangePicker[] - + placeholder: { type: ControlType.String }, + // 开关大小，可选值：default small string default + size: { + type: ControlType.Enum, + options: ["large", "default", "small"] + }, + + // ------------------------------ + // 设置分隔符 string '~' 3.14.0 + separator: { type: ControlType.String }, + // 增加时间选择功能 Object|boolean TimePicker Options + showTime: { type: ControlType.Boolean }, + // 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD" + format: { type: ControlType.String }, + // 日期 moment 无 + _value: { + type: ControlType.Array, + propertyControl: { type: ControlType.String } + }, + + ...FormItemControlProperty +}; + +export const RangePicker = props => { + const { _labelCol, _wrapperCol, _value, ...rest } = props; + + if (!rest.label) { + return ( + + ); + } + + return ( + + + + ); + + function getVal() { + if (isEmpty(_value)) { + return []; + } + return _value.map(item => moment(item)); + } +}; + +RangePicker.defaultProps = { + width: 250, + height: 32, + size: "default", + // 禁用 boolean false + disabled: false, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: "date", + // 控制弹层是否展开 boolean - + open: false, + // ------------------------------ + // 设置分隔符 string '~' 3.14.0 + separator: "~", + // 增加时间选择功能 Object|boolean TimePicker Options + showTime: false, + ...FormItemDefaults +}; + +addPropertyControls(RangePicker, controlProperty); diff --git a/code/Data Entry/DatePicker.WeekPicker.tsx b/code/Data Entry/DatePicker.WeekPicker.tsx new file mode 100644 index 0000000..3138e40 --- /dev/null +++ b/code/Data Entry/DatePicker.WeekPicker.tsx @@ -0,0 +1,83 @@ +import * as React from "react"; +import { + Frame, + addPropertyControls, + ControlType, + RenderTarget, + PropertyControls +} from "framer"; +import { DatePicker as AntDatePicker } from "antd"; +import { keys, pick } from "lodash"; +import { Form as AntForm } from "antd"; +import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem"; +const moment = require("moment"); + +const controlProperty: PropertyControls = { + // 禁用 boolean false + disabled: { type: ControlType.Boolean }, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: { + type: ControlType.Enum, + options: ["time", "date", "month", "year", "decade"] + }, + // 控制弹层是否展开 boolean - + open: { type: ControlType.Boolean }, + // 输入框提示文字 string|RangePicker[] - + placeholder: { type: ControlType.String }, + // 开关大小，可选值：default small string default + size: { + type: ControlType.Enum, + options: ["large", "default", "small"] + }, + + // ------------------------------ + + // 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD" + format: { type: ControlType.String }, + // 日期 moment 无 + _value: { type: ControlType.String }, + + ...FormItemControlProperty +}; + +export const WeekPicker = props => { + const { _labelCol, _wrapperCol, _value, ...rest } = props; + + if (!rest.label) { + return ( + + ); + } + + return ( + + + + ); +}; + +WeekPicker.defaultProps = { + width: 200, + height: 32, + size: "default", + // 禁用 boolean false + disabled: false, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: "date", + // 控制弹层是否展开 boolean - + open: false, + // ------------------------------ + ...FormItemDefaults +}; + +addPropertyControls(WeekPicker, controlProperty); diff --git a/code/Data Entry/DatePicker.tsx b/code/Data Entry/DatePicker.tsx new file mode 100644 index 0000000..595c97b --- /dev/null +++ b/code/Data Entry/DatePicker.tsx @@ -0,0 +1,88 @@ +import * as React from "react"; +import { + Frame, + addPropertyControls, + ControlType, + RenderTarget, + PropertyControls +} from "framer"; +import { DatePicker as AntDatePicker } from "antd"; +import { keys, pick } from "lodash"; +import { Form as AntForm } from "antd"; +import { FormItemControlProperty, FormItemDefaults } from "../common/FormItem"; +const moment = require("moment"); + +const controlProperty: PropertyControls = { + // 禁用 boolean false + disabled: { type: ControlType.Boolean }, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: { + type: ControlType.Enum, + options: ["time", "date", "month", "year", "decade"] + }, + // 控制弹层是否展开 boolean - + open: { type: ControlType.Boolean }, + // 输入框提示文字 string|RangePicker[] - + placeholder: { type: ControlType.String }, + // 开关大小，可选值：default small string default + size: { + type: ControlType.Enum, + options: ["large", "default", "small"] + }, + + // ------------------------------ + + // 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 moment.js string | string[] "YYYY-MM-DD" + format: { type: ControlType.String }, + // 增加时间选择功能 Object|boolean TimePicker Options + showTime: { type: ControlType.Boolean }, + // 是否展示“今天”按钮 boolean true + showToday: { type: ControlType.Boolean }, + // 日期 moment 无 + _value: { type: ControlType.String }, + + ...FormItemControlProperty +}; + +export const DatePicker = props => { + const { _labelCol, _wrapperCol, _value, ...rest } = props; + + if (!rest.label) { + return ( + + ); + } + + return ( + + + + ); +}; + +DatePicker.defaultProps = { + width: 200, + height: 32, + size: "default", + // 禁用 boolean false + disabled: false, + // 日期面板的状态（设置后无法选择年份/月份？） time|date|month|year|decade 'date' + mode: "date", + // 控制弹层是否展开 boolean - + open: false, + // ------------------------------ + showTime: false, + ...FormItemDefaults +}; + +addPropertyControls(DatePicker, controlProperty); diff --git a/package.json b/package.json index 92b4807..fda2233 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "author": "bin yang", "dependencies": { "antd": "^3.23.3", - "lodash": "^4.17.15" + "lodash": "^4.17.15", + "moment": "^2.24.0" }, "name": "@framer/bzone.ant-design-ui-kit", "version": "1.2.0", @@ -37,4 +38,4 @@ "url": "https://github.com/tolerance-go/ant-design-framer/issues" }, "homepage": "https://github.com/tolerance-go/ant-design-framer#readme" -} \ No newline at end of file +}