├── .gitattributes
├── .gitignore
├── .npmignore
├── .stylelintrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README-cn.md
├── README.md
├── commitlint.config.js
├── components
├── Alert
│ ├── Alert.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── AutoComplete
│ ├── AutoComplete.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Avatar
│ ├── Avatar.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── BackTop
│ ├── Backtop.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── assist.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Badge
│ ├── Badge.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Breadcrumb
│ ├── Breadcrumb.tsx
│ ├── BreadcrumbItem.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Button
│ ├── Button.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Card
│ ├── Card.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Carousel
│ ├── Carousel.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Checkbox
│ ├── Checkbox.tsx
│ ├── CheckboxGroup.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Collapse
│ ├── Collapse.tsx
│ ├── Panel.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── DatePicker
│ ├── DatePicker.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Divider
│ ├── Divider.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Drawer
│ ├── Drawer.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Form
│ ├── Form.tsx
│ ├── Validator.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Grid
│ ├── Col.tsx
│ ├── Row.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── grid.less
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Helpers
│ ├── ClickOutside.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Icon
│ ├── Icon.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── iconName.js
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Input
│ ├── Input.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── InputNumber
│ ├── InputNumber.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Loading
│ ├── Loading.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ ├── loadSvg.ts
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Menu
│ ├── Menu.tsx
│ ├── MenuItem.tsx
│ ├── MenuItemGroup.tsx
│ ├── SubMenu.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── horizontal.less
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ ├── var.less
│ │ └── vertical.less
├── Message
│ ├── Message.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Modal
│ ├── Modal.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Notification
│ ├── Notification.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Pagination
│ ├── Pagination.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Pop
│ ├── Pop.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── PopOver
│ ├── PopOver.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Progress
│ ├── Progress.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Radio
│ ├── Radio.tsx
│ ├── RadioGroup.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Rate
│ ├── Rate.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Ripple
│ ├── Ripple.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ ├── rippleJs.d.ts
│ ├── rippleJs.js
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Select
│ ├── OptGroup.tsx
│ ├── Option.tsx
│ ├── Select.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Skeleton
│ ├── Skeleton.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Slider
│ ├── Slider.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Steps
│ ├── Steps.tsx
│ ├── StepsItem.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Switch
│ ├── Switch.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Table
│ ├── Table.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Tabs
│ ├── Pane.tsx
│ ├── Tabs.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── card.less
│ │ ├── horizontal.less
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ ├── panel.less
│ │ ├── var.less
│ │ └── vertical.less
├── Tag
│ ├── Tag.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── TimePicker
│ ├── TimePanel.tsx
│ ├── TimePicker.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Timeline
│ ├── Timeline.tsx
│ ├── TimelineItem.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Tooltip
│ ├── Tooltip.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── Transitions
│ ├── Expand.tsx
│ ├── Scale.tsx
│ ├── Slide.tsx
│ ├── __tests__
│ │ ├── e2e.test.tsx
│ │ └── props.test.tsx
│ ├── index.tsx
│ └── style
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── less.js
│ │ └── var.less
├── global.d.ts
├── index.tsx
├── styles
│ ├── animation
│ │ ├── fade.less
│ │ ├── index.less
│ │ ├── progress.less
│ │ └── rotate.less
│ ├── common
│ │ ├── common.less
│ │ ├── index.less
│ │ └── reset.less
│ ├── components.less
│ ├── index.less
│ ├── mixins
│ │ ├── clearfix.less
│ │ └── index.less
│ └── var.less
├── template
│ └── component.tsx
├── tsconfig.json
└── utils
│ ├── colorFormat.tsx
│ ├── contain.tsx
│ ├── customTransition.tsx
│ ├── dialog.tsx
│ ├── index.tsx
│ ├── isNumberCode.tsx
│ ├── mask.tsx
│ ├── renderInRootDom.tsx
│ └── valueTransition.tsx
├── config
├── devServer.js
└── production.js
├── docs
├── App.tsx
├── components
│ ├── ApiBox
│ │ ├── index.less
│ │ └── index.tsx
│ ├── CodeBox
│ │ ├── index.less
│ │ └── index.tsx
│ └── Markdown
│ │ ├── index.less
│ │ └── index.tsx
├── effects.md
├── entry.tsx
├── favicon.ico
├── index.html
├── index.less
├── index.tsx
├── intro.md
├── modules.d.ts
├── pages
│ ├── components
│ │ ├── Alert
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── alertCustom.md
│ │ │ │ ├── alertCustom.tsx
│ │ │ │ ├── alertDemo.md
│ │ │ │ └── alertDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── AutoComplete
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── autoCompleteDemo.md
│ │ │ │ ├── autoCompleteDemo.tsx
│ │ │ │ ├── autoCompleteFilter.md
│ │ │ │ └── autoCompleteFilter.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Avatar
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── avatarCustom.md
│ │ │ │ ├── avatarCustom.tsx
│ │ │ │ ├── avatarDemo.md
│ │ │ │ └── avatarDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── BackTop
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── backTopCustom.md
│ │ │ │ ├── backTopCustom.tsx
│ │ │ │ ├── backTopDemo.md
│ │ │ │ ├── backTopDemo.tsx
│ │ │ │ └── fire.png
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Badge
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── badgeCustom.md
│ │ │ │ ├── badgeCustom.tsx
│ │ │ │ ├── badgeDemo.md
│ │ │ │ └── badgeDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Breadcrumb
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── breadcrumbCustom.md
│ │ │ │ ├── breadcrumbCustom.tsx
│ │ │ │ ├── breadcrumbDemo.md
│ │ │ │ └── breadcrumbDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Button
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── buttonDisabled.md
│ │ │ │ ├── buttonDisabled.tsx
│ │ │ │ ├── buttonGhost.md
│ │ │ │ ├── buttonGhost.tsx
│ │ │ │ ├── buttonIcon.md
│ │ │ │ ├── buttonIcon.tsx
│ │ │ │ ├── buttonLoading.md
│ │ │ │ ├── buttonLoading.tsx
│ │ │ │ ├── buttonType.md
│ │ │ │ └── buttonType.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Card
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── cardBorder.md
│ │ │ │ ├── cardBorder.tsx
│ │ │ │ ├── cardCustom.md
│ │ │ │ ├── cardCustom.tsx
│ │ │ │ ├── cardDemo.md
│ │ │ │ └── cardDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Carousel
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── carouselCustom.md
│ │ │ │ ├── carouselCustom.tsx
│ │ │ │ ├── carouselDemo.md
│ │ │ │ └── carouselDemo.tsx
│ │ │ ├── index.less
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── CheckBox
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── checkBoxControl.md
│ │ │ │ ├── checkBoxControl.tsx
│ │ │ │ ├── checkBoxDemo.md
│ │ │ │ ├── checkBoxDemo.tsx
│ │ │ │ ├── checkBoxGroup.md
│ │ │ │ └── checkBoxGroup.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Collapse
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── collapseCustom.md
│ │ │ │ ├── collapseCustom.tsx
│ │ │ │ ├── collapseDemo.md
│ │ │ │ └── collapseDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Color
│ │ │ ├── color.md
│ │ │ ├── color.ts
│ │ │ ├── colorManipulator.d.ts
│ │ │ ├── colorManipulator.js
│ │ │ ├── index.less
│ │ │ ├── index.tsx
│ │ │ └── intro.md
│ │ ├── DatePicker
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── datePickerCustom.md
│ │ │ │ ├── datePickerCustom.tsx
│ │ │ │ ├── datePickerDemo.md
│ │ │ │ ├── datePickerDemo.tsx
│ │ │ │ ├── datePickerTime.md
│ │ │ │ └── datePickerTime.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Divider
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── dividerCustom.md
│ │ │ │ ├── dividerCustom.tsx
│ │ │ │ ├── dividerDemo.md
│ │ │ │ └── dividerDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Drawer
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── drawerCustom.md
│ │ │ │ ├── drawerCustom.tsx
│ │ │ │ ├── drawerDemo.md
│ │ │ │ └── drawerDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── FAQ
│ │ │ ├── faq.md
│ │ │ ├── index.tsx
│ │ │ └── yoshino.jpg
│ │ ├── Form
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── formCustom.md
│ │ │ │ ├── formCustom.tsx
│ │ │ │ ├── formDemo.md
│ │ │ │ └── formDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Grid
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── gridConfig.md
│ │ │ │ ├── gridConfig.tsx
│ │ │ │ ├── gridCustom.md
│ │ │ │ ├── gridCustom.tsx
│ │ │ │ ├── gridDemo.md
│ │ │ │ ├── gridDemo.tsx
│ │ │ │ ├── gridFlex.md
│ │ │ │ ├── gridFlex.tsx
│ │ │ │ ├── gridFlexOrder.md
│ │ │ │ ├── gridFlexOrder.tsx
│ │ │ │ ├── gridFlexVertical.md
│ │ │ │ ├── gridFlexVertical.tsx
│ │ │ │ ├── gridOrder.md
│ │ │ │ ├── gridOrder.tsx
│ │ │ │ ├── gridOther.md
│ │ │ │ └── gridOther.tsx
│ │ │ ├── index.less
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Helpers
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── helpersCustom.md
│ │ │ │ ├── helpersCustom.tsx
│ │ │ │ ├── helpersDemo.md
│ │ │ │ ├── helpersDemo.tsx
│ │ │ │ └── index.less
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Icon
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── iconDemo.md
│ │ │ │ ├── iconDemo.tsx
│ │ │ │ ├── iconSearch.md
│ │ │ │ └── iconSearch.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Input
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── inputCustom.md
│ │ │ │ ├── inputCustom.tsx
│ │ │ │ ├── inputDemo.md
│ │ │ │ ├── inputDemo.tsx
│ │ │ │ ├── inputDisabled.md
│ │ │ │ └── inputDisabled.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── InputNumber
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── inputNumberDemo.md
│ │ │ │ └── inputNumberDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Loading
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── loadingContainer.md
│ │ │ │ ├── loadingContainer.tsx
│ │ │ │ ├── loadingCustom.md
│ │ │ │ ├── loadingCustom.tsx
│ │ │ │ ├── loadingDemo.md
│ │ │ │ └── loadingDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Logs
│ │ │ ├── index.less
│ │ │ ├── index.tsx
│ │ │ ├── logs.md
│ │ │ └── logs
│ │ │ │ └── logs.md
│ │ ├── Menu
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── menuCustom.md
│ │ │ │ ├── menuCustom.tsx
│ │ │ │ ├── menuDemo.md
│ │ │ │ └── menuDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Message
│ │ │ ├── api.tsx
│ │ │ ├── config.md
│ │ │ ├── demo
│ │ │ │ ├── messageCustom.md
│ │ │ │ ├── messageCustom.tsx
│ │ │ │ ├── messageDemo.md
│ │ │ │ └── messageDemo.tsx
│ │ │ ├── global.md
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Modal
│ │ │ ├── api.tsx
│ │ │ ├── config.md
│ │ │ ├── demo
│ │ │ │ ├── modalCustom.md
│ │ │ │ ├── modalCustom.tsx
│ │ │ │ ├── modalDemo.md
│ │ │ │ ├── modalDemo.tsx
│ │ │ │ ├── modalInner.md
│ │ │ │ └── modalInner.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Notification
│ │ │ ├── api.tsx
│ │ │ ├── config.md
│ │ │ ├── demo
│ │ │ │ ├── notificationCustom.md
│ │ │ │ ├── notificationCustom.tsx
│ │ │ │ ├── notificationDemo.md
│ │ │ │ └── notificationDemo.tsx
│ │ │ ├── global.md
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Pagination
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── paginationCustom.md
│ │ │ │ ├── paginationCustom.tsx
│ │ │ │ ├── paginationDemo.md
│ │ │ │ └── paginationDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Progress
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── progressCircle.md
│ │ │ │ ├── progressCircle.tsx
│ │ │ │ ├── progressDemo.md
│ │ │ │ └── progressDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Radio
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── radioCustom.md
│ │ │ │ ├── radioCustom.tsx
│ │ │ │ ├── radioDemo.md
│ │ │ │ └── radioDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Rate
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── rateCustom.md
│ │ │ │ ├── rateCustom.tsx
│ │ │ │ ├── rateDemo.md
│ │ │ │ └── rateDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Ripple
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── rippleCustom.md
│ │ │ │ ├── rippleCustom.tsx
│ │ │ │ ├── rippleDemo.md
│ │ │ │ └── rippleDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Select
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── selectCustom.md
│ │ │ │ ├── selectCustom.tsx
│ │ │ │ ├── selectDemo.md
│ │ │ │ └── selectDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Skeleton
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── skeletonCustom.md
│ │ │ │ ├── skeletonCustom.tsx
│ │ │ │ ├── skeletonDemo.md
│ │ │ │ └── skeletonDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Slider
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── sliderCustom.md
│ │ │ │ ├── sliderCustom.tsx
│ │ │ │ ├── sliderDemo.md
│ │ │ │ ├── sliderDemo.tsx
│ │ │ │ ├── sliderDisabled.md
│ │ │ │ └── sliderDisabled.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Start
│ │ │ ├── index.tsx
│ │ │ └── start.md
│ │ ├── Steps
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── stepsCustom.md
│ │ │ │ ├── stepsCustom.tsx
│ │ │ │ ├── stepsDemo.md
│ │ │ │ ├── stepsDemo.tsx
│ │ │ │ ├── stepsError.md
│ │ │ │ ├── stepsError.tsx
│ │ │ │ ├── stepsVertical.md
│ │ │ │ └── stepsVertical.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Switch
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── switchCustom.md
│ │ │ │ ├── switchCustom.tsx
│ │ │ │ ├── switchDemo.md
│ │ │ │ └── switchDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Table
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── tableCustom.md
│ │ │ │ ├── tableCustom.tsx
│ │ │ │ ├── tableDemo.md
│ │ │ │ ├── tableDemo.tsx
│ │ │ │ ├── tableSortDemo.md
│ │ │ │ └── tableSortDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Tabs
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── tabsCustom.md
│ │ │ │ ├── tabsCustom.tsx
│ │ │ │ ├── tabsDemo.md
│ │ │ │ └── tabsDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Tag
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── tagCustom.md
│ │ │ │ ├── tagCustom.tsx
│ │ │ │ ├── tagDemo.md
│ │ │ │ └── tagDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Theme
│ │ │ ├── index.tsx
│ │ │ └── theme.md
│ │ ├── TimePicker
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── timePickerCustom.md
│ │ │ │ ├── timePickerCustom.tsx
│ │ │ │ ├── timePickerDemo.md
│ │ │ │ └── timePickerDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Timeline
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── timelineCustom.md
│ │ │ │ ├── timelineCustom.tsx
│ │ │ │ ├── timelineDemo.md
│ │ │ │ └── timelineDemo.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Tooltip
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── tooltipCustom.md
│ │ │ │ ├── tooltipCustom.tsx
│ │ │ │ ├── tooltipDemo.md
│ │ │ │ ├── tooltipDemo.tsx
│ │ │ │ ├── tooltipState.md
│ │ │ │ ├── tooltipState.tsx
│ │ │ │ ├── tooltipTrigger.md
│ │ │ │ └── tooltipTrigger.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Transitions
│ │ │ ├── api.tsx
│ │ │ ├── demo
│ │ │ │ ├── index.less
│ │ │ │ ├── transitionsCustom.md
│ │ │ │ ├── transitionsCustom.tsx
│ │ │ │ ├── transitionsDemo.md
│ │ │ │ ├── transitionsDemo.tsx
│ │ │ │ ├── transitionsScale.md
│ │ │ │ └── transitionsScale.tsx
│ │ │ ├── index.md
│ │ │ └── index.tsx
│ │ ├── Yoshino
│ │ │ ├── index.tsx
│ │ │ └── intro.md
│ │ ├── index.tsx
│ │ ├── pageMenu.tsx
│ │ └── routes.tsx
│ ├── index.less
│ ├── index.tsx
│ └── themes
│ │ ├── index.less
│ │ ├── index.tsx
│ │ ├── screenshot
│ │ └── yoshion-theme-template.png
│ │ └── themes.ts
└── tsconfig.json
├── package-lock.json
├── package.json
├── postcss.config.js
├── scripts
├── allComponents.js
├── build.js
├── components.js
├── gulpLess.js
├── jest.setup.js
├── new-component.js
├── new-docs.js
└── updateEntry.js
├── styleguide.config.js
├── tsconfig.json
├── tslint.json
└── webpack.config.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.less linguist-language=TypeScript
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
23 | styleguide
24 |
25 | /dist
26 |
27 | /lib
28 | /es6
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | build/
2 | node_modules/
3 | scripts/
4 | styleguide/
5 | config/
6 | docs/
7 | .*.swp
8 | .*.swp
9 | ._*
10 | .DS_Store
11 | .git
12 | .hg
13 | .lock-wscript
14 | .svn
15 | .wafpickle-*
16 | tsconfig.json
17 | tslint.json
18 | webpack.config.js
19 | .gitattributes
20 | .gitignore
21 | .stylelintrc
22 | LICENSE
23 | postcss.config.js
24 | styleguide.confgi.js
25 |
26 | components/**/*.tsx
27 | components/**/__test__/
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "stylelint-config-standard"
4 | ],
5 | "rules": {
6 | "block-no-empty": null,
7 | "no-duplicate-selectors": null,
8 | "unit-blacklist": ["rem"],
9 | "unit-whitelist": ["px", "em", "deg", "%", "s", "vw", "vh"],
10 | },
11 | }
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | os: osx
3 | node_js:
4 | - 8.11.3
5 |
6 | cache:
7 | directories:
8 | - "node_modules"
9 |
10 | install:
11 | - npm install
12 |
13 | script:
14 | - npm run lint
15 | - npm run build
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['@commitlint/config-angular'],
3 | rules: {
4 | 'subject-case': [0],
5 | }
6 | };
--------------------------------------------------------------------------------
/components/Alert/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Alert from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Alert;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Alert/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Alert from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Alert/index.tsx:
--------------------------------------------------------------------------------
1 | import Alert from './Alert';
2 |
3 | export default Alert;
4 |
--------------------------------------------------------------------------------
/components/Alert/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
--------------------------------------------------------------------------------
/components/Alert/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
--------------------------------------------------------------------------------
/components/Alert/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/AutoComplete/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import AutoComplete from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as AutoComplete;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/AutoComplete/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import AutoComplete from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/AutoComplete/index.tsx:
--------------------------------------------------------------------------------
1 | import AutoComplete from './AutoComplete';
2 |
3 | export default AutoComplete;
4 |
--------------------------------------------------------------------------------
/components/AutoComplete/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Input/style/';
2 | import '../../Pop/style/';
3 | import './index.css';
--------------------------------------------------------------------------------
/components/AutoComplete/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Input/style/less.js';
2 | import '../../Pop/style/less.js';
3 | import '../../Transitions/style/less.js';
4 | import './index.less';
5 |
--------------------------------------------------------------------------------
/components/AutoComplete/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Avatar/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Avatar from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Avatar;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Avatar/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Avatar from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Avatar/index.tsx:
--------------------------------------------------------------------------------
1 | import Avatar from './Avatar';
2 |
3 | export default Avatar;
4 |
--------------------------------------------------------------------------------
/components/Avatar/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Avatar/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Avatar/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // avatar
5 | @avatar-size-small: 24px;
6 | @avatar-size-default: 32px;
7 | @avatar-size-large: 40px;
8 | @avatar-bgColor-default: #ccc;
9 | @avatar-fontSize-small: 14px;
10 | @avatar-fontSize-default: 18px;
11 | @avatar-fontSize-large: 24px;
12 | @avatar-square-radius: 5px;
13 |
--------------------------------------------------------------------------------
/components/BackTop/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Backtop from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Backtop;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/BackTop/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Backtop from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/BackTop/assist.tsx:
--------------------------------------------------------------------------------
1 | export const backTop = (durations: number, callback?: () => void | undefined) => {
2 | let dom: HTMLElement;
3 | if (document.documentElement.scrollTop) {
4 | dom = document.documentElement;
5 | } else {
6 | dom = document.body;
7 | }
8 | const scrollTop = dom.scrollTop;
9 | // tslint:disable
10 | for (let i = 60; i >= 0; i--) {
11 | setTimeout(((i) => {
12 | return () => {
13 | dom.scrollTop = scrollTop * i / 60;
14 | if (i === 0 && typeof callback === 'function') {
15 | callback();
16 | }
17 | };
18 | })(i), durations * (1 - i / 60));
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/components/BackTop/index.tsx:
--------------------------------------------------------------------------------
1 | import Backtop from './Backtop';
2 |
3 | export default Backtop;
4 |
--------------------------------------------------------------------------------
/components/BackTop/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
--------------------------------------------------------------------------------
/components/BackTop/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @backtop-prefix-cls: ~"@{css-prefix}-backtop";
4 |
5 | .@{backtop-prefix-cls} {
6 | position: fixed;
7 | cursor: pointer;
8 | display: block;
9 | border-radius: 4px;
10 |
11 | &-default {
12 | background-color: @primary-color;
13 | border-radius: @border-radius-base;
14 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
15 | transition: all 0.2s ease-in-out;
16 | display: block;
17 |
18 | :hover {
19 | background-color: @primary-color-hover;
20 | }
21 | }
22 |
23 | i {
24 | color: #fff;
25 | font-size: 24px;
26 | padding: 8px 12px;
27 | display: inline-block;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/components/BackTop/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
--------------------------------------------------------------------------------
/components/BackTop/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 |
--------------------------------------------------------------------------------
/components/Badge/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Badge from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Badge;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Badge/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Badge from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Badge/index.tsx:
--------------------------------------------------------------------------------
1 | import Badge from './Badge';
2 |
3 | export default Badge;
4 |
--------------------------------------------------------------------------------
/components/Badge/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Badge/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @badge-prefix-cls: ~"@{css-prefix}-badge";
4 |
5 | .@{badge-prefix-cls} {
6 | display: inline-block;
7 | position: relative;
8 |
9 | span {
10 | display: inline-block;
11 | background-color: @badge-bgColor;
12 | border-radius: @badge-dot-size;
13 | border: 1px solid white;
14 | font-size: @font-size-small;
15 | color: white;
16 | }
17 |
18 | &-position {
19 | position: absolute;
20 | right: 0;
21 | top: 0;
22 | transform: translateX(50%) translateY(-40%);
23 | }
24 |
25 | &-dot {
26 | width: @badge-dot-size;
27 | height: @badge-dot-size;
28 | }
29 |
30 | &-count {
31 | padding: 0 6px;
32 | height: 20px;
33 | line-height: 20px;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/components/Badge/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Badge/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // badge
5 | @badge-dot-size: 8px;
6 | @badge-bgColor: #f44336;
7 |
--------------------------------------------------------------------------------
/components/Breadcrumb/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Breadcrumb from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Breadcrumb;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Breadcrumb/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Breadcrumb from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Breadcrumb/index.tsx:
--------------------------------------------------------------------------------
1 | import Breadcrumb from './Breadcrumb';
2 | import BreadcrumbItem from './BreadcrumbItem';
3 |
4 | Breadcrumb.Item = BreadcrumbItem;
5 | export default Breadcrumb;
6 |
--------------------------------------------------------------------------------
/components/Breadcrumb/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Breadcrumb/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @breadcrumb-prefix-cls: ~"@{css-prefix}-breadcrumb";
4 |
5 | .@{breadcrumb-prefix-cls} {
6 | &-separator {
7 | margin: 0 8px;
8 | }
9 |
10 | span:last-child {
11 | span:last-child {
12 | display: none;
13 | }
14 | }
15 | }
16 |
17 | .@{breadcrumb-prefix-cls}-item {
18 | }
19 |
--------------------------------------------------------------------------------
/components/Breadcrumb/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Breadcrumb/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Button/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Button from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Button;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Button/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Button from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import Button from './Button';
2 |
3 | export default Button;
4 |
--------------------------------------------------------------------------------
/components/Button/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
--------------------------------------------------------------------------------
/components/Button/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
--------------------------------------------------------------------------------
/components/Button/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 | @import '../../styles/animation/rotate.less';
4 |
5 | //button
6 | @button-border: 1px solid transparent;
7 | @button-border-radius: @border-radius-large;
8 | @button-padding: 0 15px;
9 |
10 | @button-border-color: @border-color;
11 |
12 | @button-danger-color: #f04134;
13 | @button-danger-color-active: #d73435;
14 |
15 | @button-primary-bgColor: @primary-color;
16 | @button-primary-hover-bgColor: @primary-color-hover;
17 | @button-primary-active-bgColor: @primary-color-active;
18 |
19 | @button-disabled-bgColor: #f7f7f7;
20 |
21 | @button-height-size-base: 32px;
22 | @button-height-size-small: 24px;
23 | @button-height-size-large: 40px;
24 |
--------------------------------------------------------------------------------
/components/Card/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Card from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Card;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Card/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Card from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Card/index.tsx:
--------------------------------------------------------------------------------
1 | import Card from './Card';
2 |
3 | export default Card;
4 |
--------------------------------------------------------------------------------
/components/Card/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Card/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @card-prefix-cls: ~"@{css-prefix}-card";
4 |
5 | .@{card-prefix-cls} {
6 | font-size: @font-size-default;
7 | background: white;
8 |
9 | &-head {
10 | padding: 16px;
11 | overflow: hidden;
12 | border-bottom: @border-color-outline 1px solid;
13 | position: relative;
14 | }
15 |
16 | &-title {
17 | }
18 |
19 | &-extra {
20 | position: absolute;
21 | right: 16px;
22 | top: 14px;
23 | }
24 |
25 | &-body {
26 | padding: 16px;
27 | }
28 |
29 | &-border {
30 | border: @border-color-outline 1px solid;
31 | }
32 |
33 | &-shadow {
34 | box-shadow: @shadow-base;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/components/Card/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Card/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Carousel/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Carousel from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Carousel;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Carousel/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Carousel from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Carousel/index.tsx:
--------------------------------------------------------------------------------
1 | import Carousel from './Carousel';
2 |
3 | export default Carousel;
4 |
--------------------------------------------------------------------------------
/components/Carousel/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
--------------------------------------------------------------------------------
/components/Carousel/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
--------------------------------------------------------------------------------
/components/Carousel/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @carousel-transition: @transition-base;
4 |
5 | @carousel-height: 400px;
6 |
7 | @carousel-icon-size: 24px;
8 | @carousel-icon-left: 20px;
9 | @carousel-icon-right: 20px;
10 | @carousel-icon-top: 20px;
11 | @carousel-icon-bottom: 20px;
12 |
13 | @carousel-hot-click-area: 40px;
14 |
15 | @carousel-dots-box-bottom: 30px;
16 | @carousel-dots-box-right: 10px;
17 | @carousel-dot-width: 16px;
18 | @carousel-dot-height: 3px;
19 | @carousel-dot-opacity: 0.3;
20 | @carousel-dot-background: white;
21 | @carousel-dot-gap: 4px;
22 | @carousel-dot-border-radius: @border-radius-base;
23 |
24 | @carousel-dot-active-width: 24px;
25 |
--------------------------------------------------------------------------------
/components/Checkbox/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Checkbox from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Checkbox;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Checkbox/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Checkbox from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Checkbox/index.tsx:
--------------------------------------------------------------------------------
1 | import Checkbox from './Checkbox';
2 | import CheckboxGroup from './CheckboxGroup';
3 | Checkbox.Group = CheckboxGroup;
4 |
5 | export default Checkbox;
6 |
--------------------------------------------------------------------------------
/components/Checkbox/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Checkbox/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Checkbox/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // checkbox
5 | @checkbox-size: 16px;
6 | @checkbox-border-color: @border-color;
7 |
--------------------------------------------------------------------------------
/components/Collapse/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Collapse from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Collapse;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Collapse/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Collapse from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Collapse/index.tsx:
--------------------------------------------------------------------------------
1 | import Collapse from './Collapse';
2 | import Panel from './Panel';
3 |
4 | Collapse.Panel = Panel;
5 |
6 | export default Collapse;
7 |
--------------------------------------------------------------------------------
/components/Collapse/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import '../../Transitions/style/';
3 | import './index.css';
--------------------------------------------------------------------------------
/components/Collapse/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import '../../Transitions/style/less.js';
3 | import './index.less';
--------------------------------------------------------------------------------
/components/Collapse/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // panel
5 | @panel-bgColor: @background-color;
6 |
--------------------------------------------------------------------------------
/components/DatePicker/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import DatePicker from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as DatePicker;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/DatePicker/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import DatePicker from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/DatePicker/index.tsx:
--------------------------------------------------------------------------------
1 | import DatePicker from './DatePicker';
2 |
3 | export default DatePicker;
4 |
--------------------------------------------------------------------------------
/components/DatePicker/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import '../../Input/style/';
3 | import '../../PopOver/style/';
4 | import '../../Button/style/';
5 | import '../../TimePicker/style/';
6 | import './index.css';
7 |
--------------------------------------------------------------------------------
/components/DatePicker/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import '../../Input/style/less.js';
3 | import '../../PopOver/style/less.js';
4 | import '../../Button/style/less.js';
5 | import '../../TimePicker/style/less.js';
6 |
7 | import './index.less';
8 |
--------------------------------------------------------------------------------
/components/DatePicker/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @datepicker-width: 160px;
4 | @datepicker-border: 1px solid #e8e8e8;
5 | @datepicker-panel-border-radius: @border-radius-large;
6 |
7 | @datepicker-panel-width: 280px;
8 |
9 | @datepicker-footer-height: 38px;
10 |
11 | @datepicker-time-title-height: 40px;
12 |
--------------------------------------------------------------------------------
/components/Divider/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Divider from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Divider;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Divider/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Divider from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Divider/index.tsx:
--------------------------------------------------------------------------------
1 | import Divider from './Divider';
2 |
3 | export default Divider;
4 |
--------------------------------------------------------------------------------
/components/Divider/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Divider/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Divider/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | @line-color: #e8e8e8;
5 |
--------------------------------------------------------------------------------
/components/Drawer/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Drawer from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Drawer;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Drawer/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Drawer from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Drawer/index.tsx:
--------------------------------------------------------------------------------
1 | import Drawer from './Drawer';
2 |
3 | export default Drawer;
4 |
--------------------------------------------------------------------------------
/components/Drawer/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Transitions/style/';
2 | import './index.css';
3 |
--------------------------------------------------------------------------------
/components/Drawer/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @drawer-prefix-cls: ~"@{css-prefix}-drawer";
4 |
5 | .@{drawer-prefix-cls} {
6 | position: fixed;
7 | top: 0;
8 | bottom: 0;
9 | background: white;
10 | transition: @transition-base;
11 | box-shadow: @drawer-shadow;
12 |
13 | &-left {
14 | left: 0;
15 | }
16 |
17 | &-right {
18 | right: 0;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/components/Drawer/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Transitions/style/less.js';
2 | import './index.less';
3 |
--------------------------------------------------------------------------------
/components/Drawer/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @drawer-shadow: 1px 1px 20px #383636;
4 |
--------------------------------------------------------------------------------
/components/Form/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Form from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 |
,
10 | ) as Form;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Form/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Form from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Form/index.tsx:
--------------------------------------------------------------------------------
1 | import Form from './Form';
2 |
3 | export default Form;
4 |
--------------------------------------------------------------------------------
/components/Form/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Grid/style/';
2 | import '../../Transitions/style/';
3 | import './index.css';
4 |
--------------------------------------------------------------------------------
/components/Form/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Grid/style/less.js';
2 | import '../../Transitions/style/less.js';
3 | import './index.less';
4 |
--------------------------------------------------------------------------------
/components/Form/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @validator-error-color: @color-error;
4 | @validator-error-shadow: 0 0 0 2px @color-error-choosed;
5 | @validator-required-color: @color-error;
6 |
--------------------------------------------------------------------------------
/components/Grid/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Grid from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Grid;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Grid/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Grid from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Grid/index.tsx:
--------------------------------------------------------------------------------
1 | // tks for https://github.com/ant-design/ant-design/tree/master/components/grid
2 | import Col from './Col';
3 | import Row from './Row';
4 |
5 | export default {
6 | Col,
7 | Row,
8 | };
9 |
--------------------------------------------------------------------------------
/components/Grid/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
--------------------------------------------------------------------------------
/components/Grid/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
--------------------------------------------------------------------------------
/components/Grid/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles//mixins/clearfix.less';
3 |
4 | @grid-columns: 24;
5 | @grid-gutter-width: 0;
6 |
--------------------------------------------------------------------------------
/components/Helpers/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Helpers from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Helpers;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Helpers/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Helpers from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Helpers/index.tsx:
--------------------------------------------------------------------------------
1 | import ClickOutside from './ClickOutside';
2 |
3 | export default {
4 | ClickOutside,
5 | };
6 |
--------------------------------------------------------------------------------
/components/Helpers/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Helpers/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @helpers-prefix-cls: ~"@{css-prefix}-helpers";
4 |
5 | .@{helpers-prefix-cls} {
6 | }
7 |
--------------------------------------------------------------------------------
/components/Helpers/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Helpers/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
--------------------------------------------------------------------------------
/components/Icon/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Icon from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Icon;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Icon/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Icon from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Icon/index.tsx:
--------------------------------------------------------------------------------
1 | import Icon from './Icon';
2 |
3 | export default Icon;
4 |
--------------------------------------------------------------------------------
/components/Icon/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Icon/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @icon-prefix-cls: ~"@{css-prefix}-icon";
4 |
5 | .@{icon-prefix-cls} {
6 | display: inline-block;
7 | line-height: 1;
8 |
9 | > * {
10 | padding: 0;
11 | margin: 0;
12 | border: 0;
13 | display: block;
14 | vertical-align: middle;
15 | }
16 |
17 | svg {
18 | width: 1em;
19 | height: 1em;
20 | fill: currentColor;
21 | vertical-align: -0.15em;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/components/Icon/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Icon/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Input/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Input from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Input;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Input/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Input from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Input/index.tsx:
--------------------------------------------------------------------------------
1 | import Input from './Input';
2 |
3 | export default Input;
4 |
--------------------------------------------------------------------------------
/components/Input/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Input/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Input/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // input
5 | @input-size-small: 24px;
6 | @input-size-default: 32px;
7 | @input-size-large: 40px;
8 | @input-border-color: @border-color;
9 | @input-border: 1px solid @input-border-color;
10 | @input-border-radius: @border-radius-large;
11 | @input-box-shadow: 0 0 0 2px @primary-color-choosed;
12 | @input-extra-item-bgColor: @background-color;
13 |
--------------------------------------------------------------------------------
/components/InputNumber/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import InputNumber from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as InputNumber;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/InputNumber/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import InputNumber from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/InputNumber/index.tsx:
--------------------------------------------------------------------------------
1 | import InputNumber from './InputNumber';
2 |
3 | export default InputNumber;
4 |
--------------------------------------------------------------------------------
/components/InputNumber/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/InputNumber/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/InputNumber/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | @input-size-small: 24px;
5 | @input-size-default: 32px;
6 | @input-size-large: 40px;
7 | @input-border-color: @border-color;
8 | @input-border: 1px solid @input-border-color;
9 | @input-border-radius: @border-radius-large;
10 | @input-box-shadow: 0 0 0 2px @primary-color-choosed;
11 | @input-extra-item-bgColor: @background-color;
12 |
--------------------------------------------------------------------------------
/components/Loading/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Loading from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Loading;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Loading/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Loading from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Loading/index.tsx:
--------------------------------------------------------------------------------
1 | import Loading from './Loading';
2 |
3 | export default Loading;
4 |
--------------------------------------------------------------------------------
/components/Loading/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
3 |
--------------------------------------------------------------------------------
/components/Loading/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
3 |
--------------------------------------------------------------------------------
/components/Loading/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 | @import '../../styles/animation/rotate.less';
4 |
5 | // loading
6 | @loading-size-small: 14px;
7 | @loading-size-default: 20px;
8 | @loading-size-large: 32px;
9 |
10 | @loading-mask-opacity: 0.5;
11 | @loading-mask-background: white;
12 |
--------------------------------------------------------------------------------
/components/Menu/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Menu from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Menu;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Menu/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Menu from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Menu/index.tsx:
--------------------------------------------------------------------------------
1 | import Menu from './Menu';
2 | import MenuItem from './MenuItem';
3 | import SubMenu from './SubMenu';
4 | import MenuItemGroup from './MenuItemGroup';
5 |
6 | Menu.Item = MenuItem;
7 | Menu.ItemGroup = MenuItemGroup;
8 | Menu.SubMenu = SubMenu;
9 |
10 | export default Menu;
11 |
--------------------------------------------------------------------------------
/components/Menu/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import '../../Transitions/style/';
3 | import '../../Pop/style/';
4 | import './index.css'
--------------------------------------------------------------------------------
/components/Menu/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import '../../Transitions/style/less.js';
3 | import '../../Pop/style/less.js';
4 | import './index.less';
--------------------------------------------------------------------------------
/components/Menu/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | @menu-prefix-cls: ~"@{css-prefix}-menu";
5 | @sub-menu-prefix-cls: ~"@{css-prefix}-sub-menu";
6 | @menu-item-group-prefix-cls: ~"@{css-prefix}-menu-item-group";
7 | @menu-item-prefix-cls: ~"@{css-prefix}-menu-item";
8 |
--------------------------------------------------------------------------------
/components/Menu/style/vertical.less:
--------------------------------------------------------------------------------
1 | .@{menu-prefix-cls}.@{menu-prefix-cls}-vertical {
2 | .@{menu-item-prefix-cls}::after {
3 | transition: @transition-base;
4 | position: absolute;
5 | right: -1px;
6 | top: 50%;
7 | content: '';
8 | display: inline-block;
9 | height: 0;
10 | width: 0;
11 | }
12 |
13 | .@{menu-item-prefix-cls}-active {
14 | background: @primary-color-choosed;
15 |
16 | &::after {
17 | top: 0;
18 | height: 100%;
19 | width: 3px;
20 | background: @primary-color;
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/components/Message/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Message from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Message;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Message/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Message from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Message/index.tsx:
--------------------------------------------------------------------------------
1 | import Message from './Message';
2 |
3 | export default Message;
4 |
--------------------------------------------------------------------------------
/components/Message/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import '../../Transitions/style/';
3 | import './index.css';
--------------------------------------------------------------------------------
/components/Message/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import '../../Transitions/style/less.js';
3 | import './index.less';
--------------------------------------------------------------------------------
/components/Message/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @message-box-padding: 8px;
4 |
5 | @message-content-padding: 10px 16px;
6 | @message-content-shadow: @shadow-base;
7 | @message-content-border-radius: @border-radius-base;
8 |
9 | @message-icon-margin-right: 5px;
10 |
--------------------------------------------------------------------------------
/components/Modal/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Modal from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Modal;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Modal/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Modal from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Modal/index.tsx:
--------------------------------------------------------------------------------
1 | import Modal from './Modal';
2 |
3 | export default Modal;
4 |
--------------------------------------------------------------------------------
/components/Modal/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import '../../Button/style/';
3 | import './index.css';
--------------------------------------------------------------------------------
/components/Modal/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import '../../Button/style/less.js';
3 | import './index.less';
--------------------------------------------------------------------------------
/components/Modal/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @modal-padding: 20px 20px 10px 20px;
4 | @modal-shadow: 1px 1px 20px #383636;
5 |
6 | @icon-width: 50px;
7 | @icon-font-size: 24px;
8 |
9 | @body-footer-spacing: 20px;
10 |
11 | @cancel-ok-spacing: 10px;
12 |
13 | @title-font-size: @font-size-large;
14 | @title-font-color: black;
15 |
16 | @content-font-size: @font-size-default;
17 | @content-font-color: rgba(0, 0, 0, 0.65);
18 |
19 | @close-icon-padding: 10px 15px;
20 |
--------------------------------------------------------------------------------
/components/Notification/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Notification from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Notification;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Notification/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Notification from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Notification/index.tsx:
--------------------------------------------------------------------------------
1 | import Notification from './Notification';
2 |
3 | export default Notification;
4 |
--------------------------------------------------------------------------------
/components/Notification/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Alert/style/';
2 | import '../../Transitions/style/';
3 | import './index.css';
4 |
--------------------------------------------------------------------------------
/components/Notification/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @notification-prefix-cls: ~"@{css-prefix}-notification";
4 |
5 | .@{notification-prefix-cls} {
6 | }
7 |
--------------------------------------------------------------------------------
/components/Notification/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Alert/style/less.js';
2 | import '../../Transitions/style/less.js';
3 | import './index.less';
4 |
--------------------------------------------------------------------------------
/components/Notification/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
--------------------------------------------------------------------------------
/components/Pagination/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Pagination from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Pagination;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Pagination/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Pagination from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Pagination/index.tsx:
--------------------------------------------------------------------------------
1 | import Pagination from './Pagination';
2 |
3 | export default Pagination;
4 |
--------------------------------------------------------------------------------
/components/Pagination/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
3 |
--------------------------------------------------------------------------------
/components/Pagination/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
3 |
--------------------------------------------------------------------------------
/components/Pagination/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // pagination
5 | @pagination-size: 32px;
6 | @pagination-border: 1px solid @border-color;
7 |
--------------------------------------------------------------------------------
/components/Pop/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Pop from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Pop;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Pop/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Pop from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Pop/index.tsx:
--------------------------------------------------------------------------------
1 | import Pop from './Pop';
2 |
3 | export default Pop;
4 |
--------------------------------------------------------------------------------
/components/Pop/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Pop/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @pop-prefix-cls: ~"@{css-prefix}-pop";
4 |
5 | .@{pop-prefix-cls} {
6 | position: absolute;
7 | outline: none;
8 |
9 | :focus {
10 | outline: none;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/components/Pop/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Pop/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | @pop-scale: scale(0.8);
5 |
--------------------------------------------------------------------------------
/components/PopOver/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import PopOver from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as PopOver;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/PopOver/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import PopOver from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/PopOver/index.tsx:
--------------------------------------------------------------------------------
1 | import PopOver from './PopOver';
2 |
3 | export default PopOver;
4 |
--------------------------------------------------------------------------------
/components/PopOver/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Transitions/style/';
2 | import '../../Helpers/style/';
3 | import './index.css';
--------------------------------------------------------------------------------
/components/PopOver/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @popOver-prefix-cls: ~"@{css-prefix}-pop-over";
4 |
5 | .@{popOver-prefix-cls} {
6 | &-box {
7 | position: absolute;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/components/PopOver/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Transitions/style/less.js';
2 | import '../../Helpers/style/less.js';
3 | import './index.less'
--------------------------------------------------------------------------------
/components/PopOver/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
--------------------------------------------------------------------------------
/components/Progress/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Progress from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Progress;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Progress/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Progress from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Progress/index.tsx:
--------------------------------------------------------------------------------
1 | import Progress from './Progress';
2 |
3 | export default Progress;
4 |
--------------------------------------------------------------------------------
/components/Progress/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Progress/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Progress/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 | @import '../../styles/animation/progress.less';
4 |
5 | @progress-circle-radius: 60px;
6 | @progress-circle-value: 24px;
7 |
--------------------------------------------------------------------------------
/components/Radio/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Radio from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Radio;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Radio/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Radio from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Radio/index.tsx:
--------------------------------------------------------------------------------
1 | import Radio from './Radio';
2 | import RadioGroup from './RadioGroup';
3 |
4 | Radio.Group = RadioGroup;
5 |
6 | export default Radio;
7 |
--------------------------------------------------------------------------------
/components/Radio/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Radio/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Radio/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // radio
5 | @radio-size: 16px;
6 | @radio-border-color: @border-color;
7 |
--------------------------------------------------------------------------------
/components/Rate/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Rate from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Rate;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Rate/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Rate from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Rate/index.tsx:
--------------------------------------------------------------------------------
1 | import Rate from './Rate';
2 |
3 | export default Rate;
4 |
--------------------------------------------------------------------------------
/components/Rate/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
3 |
--------------------------------------------------------------------------------
/components/Rate/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @rate-prefix-cls: ~"@{css-prefix}-rate";
4 |
5 | .@{rate-prefix-cls} {
6 | &-item {
7 | transition: @transition-quick;
8 | display: inline-block;
9 | position: relative;
10 | margin: 0 2px;
11 | cursor: pointer;
12 | user-select: none;
13 |
14 | span {
15 | color: @color-unactive;
16 | }
17 |
18 | div {
19 | display: inline-block;
20 | }
21 |
22 | .@{rate-prefix-cls}-first-child {
23 | }
24 |
25 | .@{rate-prefix-cls}-last-child {
26 | width: 50%;
27 | overflow: hidden;
28 | position: absolute;
29 | left: 0;
30 | top: 0;
31 | }
32 |
33 | &:hover {
34 | transform: scale(1.5);
35 | }
36 | }
37 |
38 | &-hover {
39 | span {
40 | color: @primary-color;
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/components/Rate/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
3 |
--------------------------------------------------------------------------------
/components/Rate/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Ripple/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Ripple from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Ripple;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Ripple/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Ripple from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Ripple/index.tsx:
--------------------------------------------------------------------------------
1 | import Ripple from './Ripple';
2 |
3 | export default Ripple;
4 |
--------------------------------------------------------------------------------
/components/Ripple/rippleJs.d.ts:
--------------------------------------------------------------------------------
1 | declare function rippleJs(obj: {
2 | dom: HTMLElement,
3 | color?: string,
4 | opacity?: number,
5 | }): () => void;
6 |
7 |
8 | export default rippleJs;
--------------------------------------------------------------------------------
/components/Ripple/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Ripple/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @ripple-prefix-cls: ~"@{css-prefix}-ripple";
4 |
5 | .@{ripple-prefix-cls} {
6 | display: inline-block;
7 | }
8 |
--------------------------------------------------------------------------------
/components/Ripple/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Ripple/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Select/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Select from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Select;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Select/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Select from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Select/index.tsx:
--------------------------------------------------------------------------------
1 | import Select from './Select';
2 |
3 | export default Select;
4 |
--------------------------------------------------------------------------------
/components/Select/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import '../../Pop/style/';
3 | import '../../Transitions/style/';
4 | import '../../Tag/style/';
5 | import './index.css';
--------------------------------------------------------------------------------
/components/Select/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import '../../Pop/style/less.js';
3 | import '../../Transitions/style/less.js';
4 | import '../../Tag/style/less.js';
5 | import './index.less';
--------------------------------------------------------------------------------
/components/Select/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @select-option-padding: 5px 12px;
4 | @select-option-font-size: 14px;
5 |
6 | @select-option-group-padding: 0 12px;
7 | @select-option-group-font-size: 12px;
8 |
9 | @select-size-small: 24px;
10 | @select-size-default: 32px;
11 | @select-size-large: 40px;
12 |
13 | @select-font-size-small: @font-size-default;
14 | @select-font-size-default: @font-size-default;
15 | @select-font-size-large: @font-size-large;
16 |
17 | @select-border-color: @border-color;
18 | @select-border: 1px solid @select-border-color;
19 | @select-border-radius: @border-radius-large;
20 |
21 | @select-box-shadow: 0 0 0 2px @primary-color-choosed;
22 |
23 |
--------------------------------------------------------------------------------
/components/Skeleton/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Skeleton from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Skeleton;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Skeleton/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Skeleton from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Skeleton/index.tsx:
--------------------------------------------------------------------------------
1 | import Skeleton from './Skeleton';
2 |
3 | export default Skeleton;
4 |
--------------------------------------------------------------------------------
/components/Skeleton/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
--------------------------------------------------------------------------------
/components/Skeleton/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Skeleton/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @skeleton-color: #f2f2f2;
4 | @skeleton-to-color: #e6e6e6;
5 |
--------------------------------------------------------------------------------
/components/Slider/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Slider from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Slider;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Slider/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Slider from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Slider/index.tsx:
--------------------------------------------------------------------------------
1 | import Slider from './Slider';
2 |
3 | export default Slider;
4 |
--------------------------------------------------------------------------------
/components/Slider/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Slider/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Slider/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // slider
5 | @slider-bar-size: 14px;
6 | @slider-process-height: 4px;
7 |
--------------------------------------------------------------------------------
/components/Steps/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Steps from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Steps;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Steps/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Steps from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Steps/index.tsx:
--------------------------------------------------------------------------------
1 | import Steps from './Steps';
2 | import { StepsItem } from './StepsItem';
3 |
4 | Steps.Item = StepsItem;
5 |
6 | export default Steps;
7 |
--------------------------------------------------------------------------------
/components/Steps/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
3 |
--------------------------------------------------------------------------------
/components/Steps/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
3 |
--------------------------------------------------------------------------------
/components/Steps/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // steps
5 | @steps-size-default: 32px;
6 | @steps-size-small: 24px;
7 |
--------------------------------------------------------------------------------
/components/Switch/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Switch from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Switch;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Switch/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Switch from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Switch/index.tsx:
--------------------------------------------------------------------------------
1 | import Switch from './Switch';
2 |
3 | export default Switch;
4 |
--------------------------------------------------------------------------------
/components/Switch/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Switch/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Switch/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Table/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Table from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Table;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Table/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Table from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Table/index.tsx:
--------------------------------------------------------------------------------
1 | import Table from './Table';
2 |
3 | export default Table;
4 |
--------------------------------------------------------------------------------
/components/Table/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Table/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Table/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @table-border: 1px solid #e8e8e8;
4 | @table-cell-padding: 16px;
5 | @table-th-background: rgb(250, 250, 250);
6 |
--------------------------------------------------------------------------------
/components/Tabs/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Tabs from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Tabs;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Tabs/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Tabs from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import Tabs from './Tabs';
2 |
3 | export default Tabs;
4 |
--------------------------------------------------------------------------------
/components/Tabs/style/card.less:
--------------------------------------------------------------------------------
1 | .@{tabs-prefix-cls} {
2 | &&-card {
3 | .@{tabs-prefix-cls} {
4 | &-tab {
5 | border: 1px solid @color-unactive;
6 | padding-top: 0;
7 | padding-bottom: 0;
8 |
9 | &-active {
10 | background: white;
11 | }
12 | }
13 | }
14 | }
15 |
16 | &-card&-small &-nav-scroll {
17 | line-height: @tab-card-height-small;
18 | }
19 |
20 | &-card&-default &-nav-scroll {
21 | line-height: @tab-card-height-default;
22 | }
23 |
24 | &-card&-large &-nav-scroll {
25 | line-height: @tab-card-height-large;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/components/Tabs/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Tabs/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Tabs/style/panel.less:
--------------------------------------------------------------------------------
1 | .@{tabs-prefix-cls}-pane {
2 | width: 100%;
3 | flex-shrink: 0;
4 | transition: @tab-transition;
5 |
6 | &-active {
7 | opacity: 1;
8 | }
9 |
10 | &-inactive {
11 | opacity: 0;
12 | height: 0;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/components/Tabs/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @tab-pane-size-small-padding: 8px 16px;
4 | @tab-pane-size-default-padding: 12px 16px;
5 | @tab-pane-size-large-padding: 16px;
6 |
7 | @tab-pane-size-small-font-size: @font-size-default;
8 | @tab-pane-size-default-font-size: @font-size-default;
9 | @tab-pane-size-large-font-size: @font-size-large;
10 |
11 | @tab-pane-gap: 15px;
12 |
13 | @tab-nav-wrap-gap: 16px;
14 |
15 | @tab-transition: @transition-base;
16 |
17 | @tab-border-radius: 4px;
18 |
19 | @tab-card-height-small: 24px;
20 | @tab-card-height-default: 32px;
21 | @tab-card-height-large: 40px;
22 |
--------------------------------------------------------------------------------
/components/Tag/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Tag from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Tag;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Tag/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Tag from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Tag/index.tsx:
--------------------------------------------------------------------------------
1 | import Tag from './Tag';
2 |
3 | export default Tag;
4 |
--------------------------------------------------------------------------------
/components/Tag/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import './index.css';
--------------------------------------------------------------------------------
/components/Tag/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @tag-prefix-cls: ~"@{css-prefix}-tag";
4 |
5 | .@{tag-prefix-cls} {
6 | display: inline-block;
7 | padding: 0 5px;
8 | height: 22px;
9 | font-size: @font-size-small;
10 | border-radius: @border-radius-base;
11 | background-color: @tag-bgColor;
12 | border: 1px solid @tag-border-color;
13 | color: @tag-font-color;
14 | cursor: pointer;
15 |
16 | &-container {
17 | display: flex;
18 | justify-content: center;
19 | align-items: center;
20 | height: 100%;
21 | }
22 |
23 | &-close {
24 | font-size: 18px;
25 | margin-left: 5px;
26 | transform: scale(0.7);
27 | }
28 |
29 | &-color {
30 | border: transparent;
31 | color: white;
32 |
33 | .@{tag-prefix-cls}-close {
34 | color: white;
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/components/Tag/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import './index.less';
--------------------------------------------------------------------------------
/components/Tag/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
4 | // tag
5 | @tag-bgColor: @background-color;
6 | @tag-border-color: @border-color;
7 | @tag-font-color: rgba(0, 0, 0, 0.65);
8 |
--------------------------------------------------------------------------------
/components/TimePicker/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import TimePicker from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as TimePicker;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/TimePicker/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import TimePicker from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/TimePicker/index.tsx:
--------------------------------------------------------------------------------
1 | import TimePicker from './TimePicker';
2 |
3 | export default TimePicker;
4 |
--------------------------------------------------------------------------------
/components/TimePicker/style/index.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/';
2 | import '../../Input/style/';
3 | import '../../PopOver/style/';
4 | import './index.css';
5 |
--------------------------------------------------------------------------------
/components/TimePicker/style/less.js:
--------------------------------------------------------------------------------
1 | import '../../Icon/style/less.js';
2 | import '../../Input/style/less.js';
3 | import '../../PopOver/style/less.js';
4 | import './index.less';
5 |
--------------------------------------------------------------------------------
/components/TimePicker/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
3 | @timepicker-border: 1px solid #e8e8e8;
4 |
5 | @timepicker-panel-width: 128px;
6 | @timepicker-panel-border-radius: @border-radius-large;
7 |
8 | @timepicjer-panel-select-item-height: 192px;
9 | @timepicjer-panel-select-item-width: 56px;
10 |
--------------------------------------------------------------------------------
/components/Timeline/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Timeline from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Timeline;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Timeline/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Timeline from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Timeline/index.tsx:
--------------------------------------------------------------------------------
1 | import Timeline from './Timeline';
2 | import TimelineItem from './TimelineItem';
3 |
4 | Timeline.Item = TimelineItem;
5 | export default Timeline;
6 |
--------------------------------------------------------------------------------
/components/Timeline/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Timeline/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Timeline/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 |
--------------------------------------------------------------------------------
/components/Tooltip/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Tooltip from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Tooltip;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Tooltip/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Tooltip from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Tooltip/index.tsx:
--------------------------------------------------------------------------------
1 | import Tooltip from './Tooltip';
2 |
3 | export default Tooltip;
4 |
--------------------------------------------------------------------------------
/components/Tooltip/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Tooltip/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Tooltip/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 | @import '../../styles/common/reset.less';
3 | @import '../../Pop/style/index.less';
4 |
--------------------------------------------------------------------------------
/components/Transitions/__tests__/e2e.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Simulate, renderIntoDocument, scryRenderedComponentsWithType} from 'react-dom/test-utils';
3 | import {findDOMNode} from 'react-dom';
4 | import Transitions from '../index';
5 |
6 | describe('多选', () => {
7 | test('点击其中一个选项后可通过 onChange 拿到最新的值', () => {
8 | const component = renderIntoDocument(
9 | ,
10 | ) as Transitions;
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/components/Transitions/__tests__/props.test.tsx:
--------------------------------------------------------------------------------
1 | import * as renderer from 'react-test-renderer';
2 | import * as React from 'react';
3 | import Transitions from '../index';
4 |
5 | describe('Props', () => {
6 |
7 | test('默认', () => {
8 | const component = renderer.create(
9 | ,
10 | );
11 | const tree = component.toJSON();
12 | expect(tree).toMatchSnapshot();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/components/Transitions/index.tsx:
--------------------------------------------------------------------------------
1 | import Expand from './Expand';
2 | import Slide from './Slide';
3 | import Scale from './Scale';
4 |
5 | const Transitions = {
6 | Expand,
7 | Slide,
8 | Scale,
9 | };
10 |
11 | export default Transitions;
12 |
--------------------------------------------------------------------------------
/components/Transitions/style/index.js:
--------------------------------------------------------------------------------
1 | import './index.css';
2 |
--------------------------------------------------------------------------------
/components/Transitions/style/index.less:
--------------------------------------------------------------------------------
1 | @import './var.less';
2 |
3 | @expand-prefix-cls: ~"@{css-prefix}-expand";
4 |
5 | .@{expand-prefix-cls} {
6 | }
7 |
8 | @slide-prefix-cls: ~"@{css-prefix}-slide";
9 |
10 | .@{slide-prefix-cls} {
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/components/Transitions/style/less.js:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
--------------------------------------------------------------------------------
/components/Transitions/style/var.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/var.less';
2 |
--------------------------------------------------------------------------------
/components/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module "whatwg-fetch" {
2 | const a:any;
3 | const fetch:any;
4 | export {
5 | fetch
6 | };
7 | export default a;
8 | }
--------------------------------------------------------------------------------
/components/styles/animation/fade.less:
--------------------------------------------------------------------------------
1 |
2 | .fade-enter-active,
3 | .fade-leave-active {
4 | transition: opacity .5s
5 | }
6 |
7 | .fade-enter,
8 | .fade-leave-active {
9 | opacity: 0;
10 | }
--------------------------------------------------------------------------------
/components/styles/animation/index.less:
--------------------------------------------------------------------------------
1 | @import './fade';
2 | @import './progress';
3 | @import './rotate.less';
4 |
--------------------------------------------------------------------------------
/components/styles/animation/progress.less:
--------------------------------------------------------------------------------
1 | @keyframes progress-animation {
2 | 0% {
3 | opacity: 0.2;
4 | width: 0;
5 | }
6 | 50% {
7 | opacity: 0.4;
8 | width: 50%;
9 | }
10 | 80% {
11 | opacity: 0.4;
12 | width: 80%;
13 | }
14 | 100% {
15 | opacity: 0.2;
16 | width: 100%;
17 | }
18 | }
--------------------------------------------------------------------------------
/components/styles/animation/rotate.less:
--------------------------------------------------------------------------------
1 | @keyframes rotate {
2 | 0% {
3 | transform-origin: 50% 50%;
4 | transform: rotate(0deg);
5 | }
6 |
7 | 100% {
8 | transform-origin: 50% 50%;
9 | transform: rotate(360deg);
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/components/styles/common/common.less:
--------------------------------------------------------------------------------
1 | a {
2 | text-decoration:none;
3 | outline: none;
4 | cursor: pointer;
5 | color: @font-color-base;
6 | -webkit-transition: color .3s ease;
7 | transition: color .3s ease;
8 | &:active, &:hover, &:focus {
9 | text-decoration: underline;
10 | color: @color-link;
11 | }
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/components/styles/common/index.less:
--------------------------------------------------------------------------------
1 | @import './reset';
2 | @import 'common';
3 |
4 |
--------------------------------------------------------------------------------
/components/styles/index.less:
--------------------------------------------------------------------------------
1 | @import './var';
2 | @import './common/index';
3 | @import './animation/index';
4 | @import './mixins/index';
5 | @import './components';
6 |
7 |
--------------------------------------------------------------------------------
/components/styles/mixins/clearfix.less:
--------------------------------------------------------------------------------
1 | .clearfix() {
2 | zoom: 1;
3 |
4 | &::before,
5 | &::after {
6 | content: "";
7 | display: table;
8 | }
9 |
10 | &::after {
11 | clear: both;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/components/styles/mixins/index.less:
--------------------------------------------------------------------------------
1 | @import './clearfix.less';
2 |
--------------------------------------------------------------------------------
/components/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "include": ["."]
4 | }
5 |
--------------------------------------------------------------------------------
/components/utils/contain.tsx:
--------------------------------------------------------------------------------
1 | // tslint:disable
2 | export default (root: any, n: any, excludes?: any[]) => {
3 | let node = n;
4 | while (node) {
5 | if (excludes) {
6 | if (excludes.indexOf(node) !== -1) {
7 | return true;
8 | }
9 | }
10 | if (node === root) {
11 | return true;
12 | }
13 | node = node.parentNode;
14 | }
15 | return false;
16 | };
17 |
--------------------------------------------------------------------------------
/components/utils/index.tsx:
--------------------------------------------------------------------------------
1 | import contain from './contain';
2 | import { CustomTransition } from './customTransition';
3 | import isNumberCode from './isNumberCode';
4 | import Mask from './mask';
5 | import { RenderInRootDom } from './renderInRootDom';
6 | import valueTransition from './valueTransition';
7 | import Dialog from './dialog';
8 |
9 | export {
10 | contain,
11 | CustomTransition,
12 | isNumberCode,
13 | Mask,
14 | RenderInRootDom,
15 | valueTransition,
16 | Dialog,
17 | };
18 |
--------------------------------------------------------------------------------
/components/utils/isNumberCode.tsx:
--------------------------------------------------------------------------------
1 | const isNumberCode = (code: number): boolean => {
2 | // 判断数字键盘keycode
3 | if (code >= 96 && code <= 105) {
4 | return true;
5 | }
6 | // 判断主键盘keycode
7 | if (code >= 48 && code <= 57) {
8 | return true;
9 | }
10 | return false;
11 | };
12 |
13 | export default isNumberCode;
14 |
--------------------------------------------------------------------------------
/components/utils/mask.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface IProps {
4 | maskStyle?: React.CSSProperties;
5 | onClick?: () => void;
6 | }
7 |
8 | export default function(props: IProps) {
9 | const style: React.CSSProperties = {
10 | background: 'rgba(0, 0, 0, 0.65)',
11 | position: 'fixed',
12 | left: 0,
13 | right: 0,
14 | top: 0,
15 | bottom: 0,
16 | height: '100vh',
17 | width: '100vw',
18 | };
19 | return (
20 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/components/utils/valueTransition.tsx:
--------------------------------------------------------------------------------
1 | export default (
2 | config: {
3 | start: number;
4 | end: number;
5 | duration?: number;
6 | frames?: number;
7 | },
8 | intervalFunc: (v: number) => void
9 | ) => {
10 | const {
11 | start, end, duration = 200,
12 | frames = 60,
13 | } = config;
14 | if (start === end) {
15 | return;
16 | }
17 | const step = (end - start) / frames;
18 | for (let i = 1; i <= frames; i++) {
19 | setTimeout(() => {
20 | intervalFunc(start + step * i);
21 | }, duration / frames * i);
22 | }
23 | };
24 |
--------------------------------------------------------------------------------
/config/devServer.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yoshino-UI/Yoshino/2eb5f30b498e906b3941eef58ab4f8106f3a0bea/config/devServer.js
--------------------------------------------------------------------------------
/config/production.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const defaultConfig = require(path.resolve(__dirname, '../webpack.config'));
3 | const components = require(path.resolve(__dirname, '../scripts/components.js'));
4 |
5 | module.exports = {
6 | mode: 'production',
7 | entry: {
8 | ...components,
9 | },
10 | output: {
11 | filename: '[name].js',
12 | path: path.resolve(__dirname, '../lib'),
13 | libraryTarget: 'umd',
14 | umdNamedDefine: true,
15 | library: 'yoshino',
16 | },
17 | ...defaultConfig,
18 | devtool: false
19 | }
--------------------------------------------------------------------------------
/docs/components/ApiBox/index.less:
--------------------------------------------------------------------------------
1 | .api-box-item {
2 | margin-top: 20px;
3 |
4 | ul {
5 | list-style: circle inside;
6 | }
7 | }
--------------------------------------------------------------------------------
/docs/components/CodeBox/index.less:
--------------------------------------------------------------------------------
1 | .code-box {
2 | margin-bottom: 20px;
3 |
4 | &-intro, &-demo {
5 | margin-bottom: 20px;
6 | }
7 |
8 | pre {
9 | background: #fafafa;
10 | overflow: auto;
11 | }
12 | }
--------------------------------------------------------------------------------
/docs/effects.md:
--------------------------------------------------------------------------------
1 | 特效组件是一种特殊的组件,在不影响子元素的内部表现的情况下为子元素装饰特效(我们约定经过特效组件修饰后的子元素表现形式统一为块内元素,如果你需要你可以通过style覆盖默认设定)。你可以把子元素理解为一个女孩,而特效组件则是打扮的衣服。因此,特效组件之间是可以相互嵌套的,即一个女孩可以同时穿多件好看的衣服,不过嵌套多了会引起性能上的问题,就好比一个女孩衣服穿多了会显得很笨重。
2 |
3 | 一个多重嵌套的例子
4 | ```js
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | ```
--------------------------------------------------------------------------------
/docs/entry.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {render} from 'react-dom';
3 | import App from './App';
4 |
5 | render(, document.getElementById('root'));
6 |
--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yoshino-UI/Yoshino/2eb5f30b498e906b3941eef58ab4f8106f3a0bea/docs/favicon.ico
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Yoshino
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/docs/intro.md:
--------------------------------------------------------------------------------
1 | Yoshino, 一个基于react的pc端组件库,名字源自轻小说作品《约会大作战》及其衍生作品中登场的人物。长相宛若法国娃娃般美丽的蓝发少女,有着梦幻般的外貌和娇小的身材。第二精灵,识别名为〈隐居者(Hermit)〉。生性温驯而胆小怕生,几乎不敢与人直接对话。左手拿着的兔子型的手偶四糸奈(よしのん)是独立的人格,也是她最好的朋友。
--------------------------------------------------------------------------------
/docs/modules.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.md" {
2 | const content: string;
3 | export default content;
4 | }
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Alert/demo/alertCustom.md:
--------------------------------------------------------------------------------
1 | #### 带图标
2 | 可以通过`icon`设置图标,并且可以自定义`onClose`回调。
3 |
4 |
--------------------------------------------------------------------------------
/docs/pages/components/Alert/demo/alertCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Alert, Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
alert('关闭了')}
13 | >
14 | 成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案
15 |
16 |
}
19 | showIcon
20 | closable
21 | title='自定义文案'
22 | />
23 |
24 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/docs/pages/components/Alert/demo/alertDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用,一共四种Ttype,`success`、 `info`、`warning`、`error`。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Alert/demo/alertDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Alert } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Alert/index.md:
--------------------------------------------------------------------------------
1 | ## Alert 提示
2 | 用于页面提示用户一些需要关注的信息。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/AutoComplete/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'dataSource',
7 | intro: '自动补全数据源',
8 | type: 'any[]',
9 | defaultValue: '[]',
10 | },
11 | {
12 | props: 'activeFirstOption',
13 | intro: '高亮第一项',
14 | type: 'boolean',
15 | defaultValue: 'false',
16 | },
17 | {
18 | props: 'onFilter',
19 | intro: '自定义过滤函数',
20 | type: '(value: any, dataSource: any[]) => string[];',
21 | defaultValue: '-',
22 | },
23 | ]
24 | }
25 | ];
26 |
--------------------------------------------------------------------------------
/docs/pages/components/AutoComplete/demo/autoCompleteDemo.md:
--------------------------------------------------------------------------------
1 | #### 默认
2 | 通过 dataSource 设置自动完成的数据源
3 |
--------------------------------------------------------------------------------
/docs/pages/components/AutoComplete/demo/autoCompleteDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { AutoComplete } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/AutoComplete/demo/autoCompleteFilter.md:
--------------------------------------------------------------------------------
1 | #### 自定义过滤函数
2 | 通过 `onFilter` 设置筛选结果,返回值为过滤后需要展示的结果。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/AutoComplete/demo/autoCompleteFilter.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { AutoComplete } from '@yoshino/components/';
3 |
4 | export default class AutoCompleteFilter extends React.Component {
5 | state = {
6 | val: '',
7 | };
8 |
9 | onFilter = (value: string) => {
10 | if (value !== '') {
11 | return [value, `${value}${value}`, `${value}${value}${value}`];
12 | }
13 | return [];
14 | }
15 |
16 | render() {
17 | return (
18 |
19 |
this.setState({val})}
24 | />
25 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/docs/pages/components/AutoComplete/index.md:
--------------------------------------------------------------------------------
1 | ## AutoComplete 自动完成
2 | 用于辅助补全输入项
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Avatar/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'size',
7 | intro: '头像尺寸',
8 | type: `'small' | 'default' | 'large'`,
9 | defaultValue: 'default',
10 | },
11 | {
12 | props: 'shape',
13 | intro: '形状',
14 | type: `'circle' | 'square'`,
15 | defaultValue: 'circle',
16 | },
17 | {
18 | props: 'icon',
19 | intro: '头像内容,也可以是文字',
20 | type: 'ReactNode',
21 | defaultValue: 'person',
22 | },
23 | {
24 | props: 'src',
25 | intro: '图片资源',
26 | type: 'string',
27 | defaultValue: '-',
28 | },
29 | ]
30 | }
31 | ];
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Avatar/demo/avatarCustom.md:
--------------------------------------------------------------------------------
1 | #### 自定义
2 | 可以通过`src`自定义图片资源。
--------------------------------------------------------------------------------
/docs/pages/components/Avatar/demo/avatarDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
--------------------------------------------------------------------------------
/docs/pages/components/Avatar/demo/avatarDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Avatar, Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
12 |
13 |
} shape='square' style={{backgroundColor: '#f06292', color: '#ffebee'}}/>
14 |
}/>
15 |
}/>
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/docs/pages/components/Avatar/index.md:
--------------------------------------------------------------------------------
1 | ## Avatar 头像
2 | 用于表示用户头像信息。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/BackTop/demo/backTopCustom.md:
--------------------------------------------------------------------------------
1 | #### 自定义
2 | 可以自定义`backtop`的触发条件以及图标。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/BackTop/demo/backTopCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { BackTop } from '@yoshino/components/';
3 | const img = require('./fire.png');
4 |
5 | export default function() {
6 | return (
7 | alert('到顶了!')}>
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/BackTop/demo/backTopDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
--------------------------------------------------------------------------------
/docs/pages/components/BackTop/demo/backTopDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { BackTop } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/BackTop/demo/fire.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yoshino-UI/Yoshino/2eb5f30b498e906b3941eef58ab4f8106f3a0bea/docs/pages/components/BackTop/demo/fire.png
--------------------------------------------------------------------------------
/docs/pages/components/BackTop/index.md:
--------------------------------------------------------------------------------
1 | ## BackTop 返回顶部
2 | 返回页面顶部的操作按钮。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Badge/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'count',
7 | intro: '展示的数字',
8 | type: 'number',
9 | defaultValue: '-',
10 | },
11 | {
12 | props: 'max',
13 | intro: '展示数字最大值',
14 | type: 'number',
15 | defaultValue: '99',
16 | },
17 | {
18 | props: 'showZero',
19 | intro: 'count为0的时候是否显示徽标',
20 | type: 'boolean',
21 | defaultValue: 'false',
22 | },
23 | {
24 | props: 'dotted',
25 | intro: '小点,设置后count无效',
26 | type: 'boolean',
27 | defaultValue: 'false',
28 | },
29 | ]
30 | }
31 | ];
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Badge/demo/badgeCustom.md:
--------------------------------------------------------------------------------
1 | #### 搭配使用
2 | 可搭配`Avatar`合`Icon`使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Badge/demo/badgeCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Badge, Avatar, Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Badge/demo/badgeDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Badge/demo/badgeDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Badge } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Badge/index.md:
--------------------------------------------------------------------------------
1 | ## Badge 徽标
2 | 一般用于消息提醒。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Breadcrumb/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'Breadcrumb',
4 | json: [
5 | {
6 | props: 'separator',
7 | intro: '分隔符',
8 | type: 'string | ReactNode',
9 | defaultValue: '`/`',
10 | },
11 | ]
12 | }
13 | ];
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Breadcrumb/demo/breadcrumbCustom.md:
--------------------------------------------------------------------------------
1 | #### 自定分隔符
2 | 设置`separator`来自定义分隔符
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Breadcrumb/demo/breadcrumbCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Breadcrumb, Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | 首页
8 | 中心
9 | 编辑
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/docs/pages/components/Breadcrumb/demo/breadcrumbDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Breadcrumb/demo/breadcrumbDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Breadcrumb } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | 中国
8 | 四川
9 | 成都
10 | 天府三街
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Breadcrumb/index.md:
--------------------------------------------------------------------------------
1 | ## Breadcrumb 面包屑导航
2 | `Breadcrumb`组件显示网站的层级结构,告知用户当前所在位置,以及在需要向上级导航时使用。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonDisabled.md:
--------------------------------------------------------------------------------
1 | #### 不可用状态
2 | 添加`disabled`属性可让按钮处于不可用状态,此时事件属性无效。
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonDisabled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Button } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonGhost.md:
--------------------------------------------------------------------------------
1 | #### 幽灵模式
2 | 幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonGhost.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Button } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonIcon.md:
--------------------------------------------------------------------------------
1 | #### 按钮的图标及形状
2 | 通过设置`icon`属性在Button内嵌入一个Icon,或者直接在Button内使用Icon组件。`icon`可以是一个`Element`,也可以是对应的`Icon`组件的`type`值。
3 |
4 | 可以通过`tail`控制图标在组件中的位置
5 |
6 | 可以通过`shape设置按钮的形状`。
7 |
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonLoading.md:
--------------------------------------------------------------------------------
1 | #### 加载中的按钮
2 | 添加 `loading` 属性即可让按钮处于加载状态。
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonLoading.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Button } from '@yoshino/components/';
3 |
4 | export default class ButtonLoading extends React.Component {
5 | state = {
6 | loading: false,
7 | };
8 |
9 | render() {
10 | return (
11 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonType.md:
--------------------------------------------------------------------------------
1 | #### 按钮类型
2 | 按钮类型有:主要按钮、默认按钮、虚线按钮、危险按钮。
3 |
4 | 通过设置type为`primary`、`default`、`dashed`、`danger`创建不同的按钮,不设置为默认为`default`。
--------------------------------------------------------------------------------
/docs/pages/components/Button/demo/buttonType.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Button } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Button/index.md:
--------------------------------------------------------------------------------
1 | ## Button 按钮
2 | 通用组件,用于点击操作,一般在触发业务逻辑时使用。
3 |
4 |
5 | ## 代码演示
6 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'title',
7 | intro: '标题',
8 | type: 'string',
9 | defaultValue: '',
10 | },
11 | {
12 | props: 'extra',
13 | intro: '更多',
14 | type: 'ReactNode',
15 | defaultValue: '',
16 | },
17 | {
18 | props: 'border',
19 | intro: '边框',
20 | type: 'boolean',
21 | defaultValue: 'true',
22 | },
23 | {
24 | props: 'boxshadow',
25 | intro: '阴影',
26 | type: 'boolean',
27 | defaultValue: 'false',
28 | },
29 | ]
30 | }
31 | ];
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/demo/cardBorder.md:
--------------------------------------------------------------------------------
1 | #### 无边框
2 | 在非白色北京下可设置`border`抹去边框。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/demo/cardBorder.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Card } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/demo/cardCustom.md:
--------------------------------------------------------------------------------
1 | #### 带阴影的卡片
2 | 设置`shadow`可以使卡片更具有立体感。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/demo/cardCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Card, Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 | 更多
11 | )}
12 | border
13 | shadow
14 | >
15 | 2342342343
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/demo/cardDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/demo/cardDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Card } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | 11111
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/Card/index.md:
--------------------------------------------------------------------------------
1 | ## Card 卡片
2 | 用于集中展示一些块状信息。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Carousel/demo/carouselCustom.md:
--------------------------------------------------------------------------------
1 | #### 垂直方向
2 | 垂直方向展示并关闭控制器
--------------------------------------------------------------------------------
/docs/pages/components/Carousel/demo/carouselDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
--------------------------------------------------------------------------------
/docs/pages/components/Carousel/index.less:
--------------------------------------------------------------------------------
1 | @import '../../../../components/styles/var.less';
2 |
--------------------------------------------------------------------------------
/docs/pages/components/Carousel/index.md:
--------------------------------------------------------------------------------
1 | ## Carousel
2 | 一般用于展示网站上多张图片。
3 |
4 | `Carousel`在设计的时候使用了享元模式,浏览器中只同时渲染三个节点,提高流畅性。
5 |
6 | ## 代码演示
7 |
--------------------------------------------------------------------------------
/docs/pages/components/CheckBox/demo/checkBoxControl.md:
--------------------------------------------------------------------------------
1 | #### 受控组件
--------------------------------------------------------------------------------
/docs/pages/components/CheckBox/demo/checkBoxControl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Checkbox } from '@yoshino/components/';
3 |
4 | const CheckboxGroup = Checkbox.Group;
5 |
6 | export default class CheckboxDemo extends React.Component {
7 | state = {
8 | value: [1, 2],
9 | };
10 |
11 | render() {
12 | return (
13 | this.setState({value})}>
14 | 番薯
15 | 地瓜
16 | 铁板烧
17 |
18 | );
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/docs/pages/components/CheckBox/demo/checkBoxDemo.md:
--------------------------------------------------------------------------------
1 | #### 单个组件
2 |
--------------------------------------------------------------------------------
/docs/pages/components/CheckBox/demo/checkBoxDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Checkbox } from '@yoshino/components/';
3 |
4 | export default class CheckboxDemo extends React.Component {
5 | state = {
6 | checked: false,
7 | };
8 |
9 | onChange = () => {
10 | this.setState({checked: !this.state.checked});
11 | }
12 |
13 | render() {
14 | return (
15 |
16 | 苹果
17 |
18 | );
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/docs/pages/components/CheckBox/demo/checkBoxGroup.md:
--------------------------------------------------------------------------------
1 | #### CheckboxGroup
--------------------------------------------------------------------------------
/docs/pages/components/CheckBox/demo/checkBoxGroup.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Checkbox } from '@yoshino/components/';
3 |
4 | const CheckboxGroup = Checkbox.Group;
5 |
6 | export default function() {
7 | return (
8 |
9 | 苹果
10 | 栗子
11 | 棒槌
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/components/CheckBox/index.md:
--------------------------------------------------------------------------------
1 | ## Checkbox 多选框
2 | 用于从多个条件中筛选单个选项。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Collapse/demo/collapseCustom.md:
--------------------------------------------------------------------------------
1 | #### 手风琴模式
2 | 设置`accordion`,同时只能展开一个。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Collapse/demo/collapseCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Collapse } from '@yoshino/components/';
3 |
4 | const Panel = Collapse.Panel;
5 | export default function() {
6 | return (
7 |
8 |
9 | 1111
10 | 1111
11 | 1111
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/docs/pages/components/Collapse/demo/collapseDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Collapse/demo/collapseDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Collapse } from '@yoshino/components/';
3 |
4 | const Panel = Collapse.Panel;
5 | export default function() {
6 | return (
7 |
8 |
9 | 1111
10 | 1111
11 | 1111
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/docs/pages/components/Collapse/index.md:
--------------------------------------------------------------------------------
1 | ## Collapse 折叠板
2 | 可以放缩需要展示的内容区域。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Color/color.md:
--------------------------------------------------------------------------------
1 | ### Material 色彩表
2 | 以下是按原色分组的Material Design调色板列表。
--------------------------------------------------------------------------------
/docs/pages/components/Color/colorManipulator.d.ts:
--------------------------------------------------------------------------------
1 | export const getContrastRatio: (f: string, b :string) => number;
--------------------------------------------------------------------------------
/docs/pages/components/Color/index.less:
--------------------------------------------------------------------------------
1 | .color {
2 | &-box {
3 | display: flex;
4 | flex-wrap: wrap;
5 | justify-content: space-between;
6 | }
7 |
8 | &-box-item {
9 | width: 30%;
10 | margin-bottom: 20px;
11 | }
12 |
13 | &-box-title {
14 | margin-bottom: 60px;
15 | }
16 |
17 | &-demo {
18 | padding: 15px;
19 | font-size: 16px;
20 | }
21 |
22 | &-value {
23 | float: right;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/docs/pages/components/Color/intro.md:
--------------------------------------------------------------------------------
1 | # Color 色彩
2 | `Yoshiono`推荐使用以下调色板的颜色供开发者使用。
--------------------------------------------------------------------------------
/docs/pages/components/DatePicker/demo/datePickerCustom.md:
--------------------------------------------------------------------------------
1 | #### 不同尺寸
2 | 设置`size`修改不同尺寸`small`、`default`、`large`。
--------------------------------------------------------------------------------
/docs/pages/components/DatePicker/demo/datePickerCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { DatePicker } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/docs/pages/components/DatePicker/demo/datePickerDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 |
--------------------------------------------------------------------------------
/docs/pages/components/DatePicker/demo/datePickerDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { DatePicker } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/DatePicker/demo/datePickerTime.md:
--------------------------------------------------------------------------------
1 | #### 时刻选择
2 | 设置`showTime`可以修改时刻
--------------------------------------------------------------------------------
/docs/pages/components/DatePicker/demo/datePickerTime.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { DatePicker } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/DatePicker/index.md:
--------------------------------------------------------------------------------
1 | ## DatePicker
2 | 输入或选择日期的控件。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Divider/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'dashed',
7 | intro: '是否虚线',
8 | type: 'boolean',
9 | defaultValue: 'false',
10 | },
11 | {
12 | props: 'textAlign',
13 | intro: '文本表现',
14 | type: `'left' | 'center' | 'right'`,
15 | defaultValue: 'center',
16 | },
17 | ]
18 | }
19 | ];
20 |
--------------------------------------------------------------------------------
/docs/pages/components/Divider/demo/dividerCustom.md:
--------------------------------------------------------------------------------
1 | #### 配合文章分段
2 | 配合文章分段使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Divider/demo/dividerDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Divider/demo/dividerDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Divider } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
居左
8 |
居中
9 |
居右
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/docs/pages/components/Divider/index.md:
--------------------------------------------------------------------------------
1 | ## Divider 分割线
2 | 一般用于分割段落或者内容划分。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Drawer/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'direction',
7 | intro: '抽屉导航弹出方向',
8 | type: '`left` | `right`',
9 | defaultValue: '-',
10 | },
11 | {
12 | props: 'width',
13 | intro: '抽屉弹框宽度',
14 | type: 'number',
15 | defaultValue: '256',
16 | },
17 | {
18 | props: 'open',
19 | intro: '开关状态',
20 | type: 'boolean',
21 | defaultValue: '-',
22 | },
23 | {
24 | props: 'zIndex',
25 | intro: '弹框的`z-index`',
26 | type: 'number',
27 | defaultValue: '100',
28 | },
29 | ]
30 | }
31 | ];
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Drawer/demo/drawerCustom.md:
--------------------------------------------------------------------------------
1 | ####
2 |
--------------------------------------------------------------------------------
/docs/pages/components/Drawer/demo/drawerCustom.tsx:
--------------------------------------------------------------------------------
1 | // import * as React from 'react';
2 | // import { Drawer } from '@yoshino/components/';
3 |
4 | // export default function () {
5 | // return (
6 | //
7 | //
8 | //
9 | //
10 | // )
11 | // }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Drawer/demo/drawerDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 从侧边弹出的方框,可用来包裹一些内容。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Drawer/index.md:
--------------------------------------------------------------------------------
1 | ## Drawer
2 |
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/FAQ/faq.md:
--------------------------------------------------------------------------------
1 | # FAQ
2 | #### 名字由来?
3 | > Yoshino, 名字源自轻小说作品《约会大作战》及其衍生作品中登场的人物。长相宛若法国娃娃般美丽的蓝发少女,有着梦幻般的外貌和娇小的身材。第二精灵,识别名为〈隐居者(Hermit)〉。生性温驯而胆小怕生,几乎不敢与人直接对话。左手拿着的兔子型的手偶四糸奈(よしのん)是独立的人格,也是她最好的朋友。
4 |
5 |
--------------------------------------------------------------------------------
/docs/pages/components/FAQ/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Component } from 'react';
3 | import * as md from './faq.md';
4 | import Markdown from '@docs/components/Markdown/';
5 |
6 | export default class FAQ extends Component {
7 | render() {
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/components/FAQ/yoshino.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yoshino-UI/Yoshino/2eb5f30b498e906b3941eef58ab4f8106f3a0bea/docs/pages/components/FAQ/yoshino.jpg
--------------------------------------------------------------------------------
/docs/pages/components/Form/demo/formCustom.md:
--------------------------------------------------------------------------------
1 | ####
2 |
--------------------------------------------------------------------------------
/docs/pages/components/Form/demo/formCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Form } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Form/demo/formDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 输入控件必须被`Validator`包裹,被包裹后的控件的`value`、`onChange`将被`Form`组件接管。
--------------------------------------------------------------------------------
/docs/pages/components/Form/index.md:
--------------------------------------------------------------------------------
1 | ## Form
2 | 具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridConfig.md:
--------------------------------------------------------------------------------
1 | #### 配置器
2 | 简单配置几种等分栅格和间距。
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridCustom.md:
--------------------------------------------------------------------------------
1 | #### 左右偏移
2 | `offset`可以将列`Col`向右侧偏移对应个数的`Col`。
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Grid } from '@yoshino/components/';
3 |
4 | const { Row, Col } = Grid;
5 |
6 | export default function() {
7 | return (
8 |
9 |
10 | col-8
11 | col-8
12 |
13 |
14 | col-6 col-offset-6
15 | col-6 col-offset-6
16 |
17 |
18 | col-12 col-offset-6
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridDemo.md:
--------------------------------------------------------------------------------
1 | #### 基础栅格
2 | 通过`Row`和`col`组件,并通过`Col`组件的`span`属性我们就可以自由地组合布局
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Grid } from '@yoshino/components/';
3 |
4 | const { Row, Col } = Grid;
5 |
6 | export default function() {
7 | return (
8 |
9 |
10 | col-12
11 | col-12
12 |
13 |
14 | col-8
15 | col-8
16 | col-8
17 |
18 |
19 | col-6
20 | col-6
21 | col-6
22 | col-6
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridFlex.md:
--------------------------------------------------------------------------------
1 | #### Flex布局
2 | 设置`type`为`flex`, 然后定义`justify`为`start`, `center`, `end`, `space-between`, `space-around`。
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridFlexOrder.md:
--------------------------------------------------------------------------------
1 | #### Flex排序
2 | 设置`order`进行排序
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridFlexOrder.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Grid } from '@yoshino/components/';
3 |
4 | const { Row, Col } = Grid;
5 |
6 | export default function() {
7 | return (
8 |
9 |
10 | 1 col-order-4
11 | 2 col-order-3
12 | 3 col-order-2
13 | 4 col-order-1
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridFlexVertical.md:
--------------------------------------------------------------------------------
1 | #### Flex对齐
2 | 通过设置`align`指定对齐方式。
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridOrder.md:
--------------------------------------------------------------------------------
1 | #### 栅格排序
2 | 通过`push`和`pull`进行栅格排序。
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridOrder.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Grid } from '@yoshino/components/';
3 |
4 | const { Row, Col } = Grid;
5 |
6 | export default function() {
7 | return (
8 |
9 |
10 | col-18 col-push-6
11 | col-6 col-pull-18
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridOther.md:
--------------------------------------------------------------------------------
1 | #### 其他属性
2 | 嵌套在不同响应式布局中使用属性
--------------------------------------------------------------------------------
/docs/pages/components/Grid/demo/gridOther.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Grid } from '@yoshino/components/';
3 |
4 | const { Row, Col } = Grid;
5 |
6 | export default function() {
7 | return (
8 |
9 |
10 | Col
11 | Col
12 | Col
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/docs/pages/components/Grid/index.md:
--------------------------------------------------------------------------------
1 | ## Grid
2 | `Grid`区域按照`24`等分的原则进行划分。
3 |
4 | 我们定义了两个概念,行row和列col,具体使用方法如下:
5 | - 使用row在水平方向创建一行
6 | - 将一组col插入在row中
7 | - 在每个col中,键入自己的内容
8 | - 通过设置col的span参数,指定跨越的范围,其范围是1到24
9 | - 每个row中的col总和应该为24
10 |
11 | ## 代码演示
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Helpers/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API - ClickOutside',
4 | intro: 'Helpers.ClickOutside',
5 | json: [
6 | {
7 | props: 'clickOutside',
8 | intro: '点击外部回调',
9 | type: '() => void',
10 | defaultValue: '-',
11 | },
12 | {
13 | props: 'clickInside',
14 | intro: '点击内部回调',
15 | type: '() => void',
16 | defaultValue: '-',
17 | },
18 | ]
19 | }
20 | ];
21 |
--------------------------------------------------------------------------------
/docs/pages/components/Helpers/demo/helpersCustom.md:
--------------------------------------------------------------------------------
1 | ####
2 |
--------------------------------------------------------------------------------
/docs/pages/components/Helpers/demo/helpersCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | // import { Helpers } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | {/* */}
8 | {/* */}
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Helpers/demo/helpersDemo.md:
--------------------------------------------------------------------------------
1 | #### ClickOutside
2 |
--------------------------------------------------------------------------------
/docs/pages/components/Helpers/demo/helpersDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Helpers } from '@yoshino/components/';
3 | import './index.less';
4 |
5 | const {ClickOutside} = Helpers;
6 |
7 | export default class App extends React.Component {
8 | state = {
9 | in: false,
10 | };
11 |
12 | render() {
13 | return (
14 |
15 |
{
17 | this.setState({
18 | in: false,
19 | });
20 | }}
21 | clickInside={() => {
22 | this.setState({
23 | in: true,
24 | });
25 | }}
26 | >
27 | {this.state.in ? '点击了内部' : '点击了外部'}
28 |
29 |
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/pages/components/Helpers/demo/index.less:
--------------------------------------------------------------------------------
1 | @import '../../../../../components/styles/var.less';
2 |
3 | .helpers-click-outside-demo-box {
4 | width: 200px;
5 | background: @primary-color;
6 | color: white;
7 | text-align: center;
8 | margin-top: 10px;
9 | height: 200px;
10 | line-height: 200px;
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Helpers/index.md:
--------------------------------------------------------------------------------
1 | ## Helpers
2 |
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Icon/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'style',
7 | intro: '样式',
8 | type: 'object',
9 | defaultValue: '-',
10 | },
11 | {
12 | props: 'type',
13 | intro: '图标类型',
14 | type: 'string',
15 | defaultValue: '-',
16 | },
17 | {
18 | props: 'svg',
19 | intro: '插入矢量图',
20 | type: 'string',
21 | defaultValue: '-',
22 | },
23 | ]
24 | }
25 | ];
26 |
--------------------------------------------------------------------------------
/docs/pages/components/Icon/demo/iconDemo.md:
--------------------------------------------------------------------------------
1 | #### 自定义
2 | `Icon`可以使用 `style` 和 `className` 设置图标的大小和颜色。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Icon/demo/iconDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/Icon/demo/iconSearch.md:
--------------------------------------------------------------------------------
1 | #### 自定义
2 | `Icon`可以使用 `style` 和 `className` 设置图标的大小和颜色。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Icon/index.md:
--------------------------------------------------------------------------------
1 | ## Icon 图标
2 | 展示对应的矢量化图标。
3 |
4 | Icon组件的图标库采用了`Ionicons 4.4.2`,对图标的导入采用按需加载,你无须担心仅使用了一个字体就引入了所有图标文件。
5 |
6 | 如果不相信你可以按`F12`打开控制台,然后再该页面刷新,查看`network`的图标加载情况。
7 |
8 | ## 代码演示
9 |
--------------------------------------------------------------------------------
/docs/pages/components/Input/demo/inputCustom.md:
--------------------------------------------------------------------------------
1 | #### 自定义
2 | 可以自定义头部和尾部,使用上更加灵活。
--------------------------------------------------------------------------------
/docs/pages/components/Input/demo/inputDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 基本使用
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Input/demo/inputDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Input, Icon} from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 | }/>
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/docs/pages/components/Input/demo/inputDisabled.md:
--------------------------------------------------------------------------------
1 | #### 禁用
2 | 开启禁用模式
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Input/demo/inputDisabled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Input} from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/docs/pages/components/Input/index.md:
--------------------------------------------------------------------------------
1 | ## Input 输入框
2 | 用于获取用书通过键盘输入的内容。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/InputNumber/demo/inputNumberDemo.md:
--------------------------------------------------------------------------------
1 | #### 简单实用
2 | `InputNumber`的大小共有`small`、`default`、`large`,同时你可以根据`min`、`max`、`step`来自定义属性。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/InputNumber/demo/inputNumberDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { InputNumber } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/docs/pages/components/InputNumber/index.md:
--------------------------------------------------------------------------------
1 | ## InputNumber 数字输入框
2 | 仅用于数字输入。该组件为了保证输入值为纯数字,state放在内部维护,value只是一个初始值,要获得最新值请通过onChange,在外部改变value不会影响视图刷新。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Loading/demo/loadingContainer.md:
--------------------------------------------------------------------------------
1 | #### 包裹需要加载的页面
--------------------------------------------------------------------------------
/docs/pages/components/Loading/demo/loadingContainer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Loading, Switch, Alert } from '@yoshino/components/';
3 |
4 | export default class App extends React.Component {
5 | state = {
6 | value: false,
7 | };
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 | this.setState({value: v})} />
17 |
18 |
19 | );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/docs/pages/components/Loading/demo/loadingCustom.md:
--------------------------------------------------------------------------------
1 | #### 其余加载样式。
2 |
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Loading/demo/loadingCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Loading, Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | }/>
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/components/Loading/demo/loadingDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。`size`设置为`auto`时能根据font-size自动调整大小
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Loading/demo/loadingDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Loading } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Loading/index.md:
--------------------------------------------------------------------------------
1 | ## Loading 加载
2 | 表示当前处于加载状态中。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Logs/index.less:
--------------------------------------------------------------------------------
1 | .logs-box {
2 | ul {
3 | list-style: circle inside;
4 | padding-left: 0;
5 |
6 | li {
7 | padding-left: 10px;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/Logs/logs.md:
--------------------------------------------------------------------------------
1 | ### 更新日志
2 | 仅记录一些重要的版本日志
--------------------------------------------------------------------------------
/docs/pages/components/Menu/demo/menuCustom.md:
--------------------------------------------------------------------------------
1 | #### 水平菜单
2 | 使用水平菜单请不要使用受控模式,会导致`Menu`组件怪异表现。
--------------------------------------------------------------------------------
/docs/pages/components/Menu/demo/menuDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Menu/index.md:
--------------------------------------------------------------------------------
1 | ## Menu 菜单
2 | 提供导航功能。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Message/config.md:
--------------------------------------------------------------------------------
1 | - message.success(config)
2 | - message.error(config)
3 | - message.info(config)
4 | - message.warn(config)
5 | - message.close(key: String)
6 | - message.destroy()
7 |
8 | `open`、`success`、`error`、`info`、`warn`都会返回一个`key`,用于`close`方法来关闭制定窗口。
9 |
10 | config 参数如下:
--------------------------------------------------------------------------------
/docs/pages/components/Message/demo/messageCustom.md:
--------------------------------------------------------------------------------
1 | ####
2 |
--------------------------------------------------------------------------------
/docs/pages/components/Message/demo/messageCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | // import { Message } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | 1
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/Message/demo/messageDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 带有类别以及图标的通知为分别为`success`、`info`、`warning`、`error`,可以使用`destroy`清空所有通知,也可以使用`close`传入`key`关闭指定的通知。通知默认`5 秒`后自动关闭,可以通过`config`配置修改默认值,也可以作为参数传入。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Message/global.md:
--------------------------------------------------------------------------------
1 | 提供全局配置方法,在调用前提前配置,全局一次生效。
2 |
3 | - notification.config(options)
4 |
5 | ```jsx
6 | notification.config({
7 | placement: 'topLeft',
8 | duration: 2000,
9 | });
10 | ```
--------------------------------------------------------------------------------
/docs/pages/components/Message/index.md:
--------------------------------------------------------------------------------
1 | ## Message
2 | 用于全局提示用户相关信息。
3 |
4 | - 用于通知、警告、成功和错误等信息。
5 | - 默认顶部居中显示同时会在`3s`后自动消失。
6 |
7 | ## 代码演示
8 |
--------------------------------------------------------------------------------
/docs/pages/components/Modal/config.md:
--------------------------------------------------------------------------------
1 | - Modal.confirm(config)
2 | - Modal.success(config)
3 | - Modal.error(config)
4 | - Modal.info(config)
5 | - Modal.warning(config)
6 | - Modal.close(key: String)
7 |
8 | `confirm`、`success`、`error`、`info`、`warning`都会返回一个`key`,用于`close`方法来关闭制定窗口。
9 |
10 | config 参数如下:
--------------------------------------------------------------------------------
/docs/pages/components/Modal/demo/modalCustom.md:
--------------------------------------------------------------------------------
1 | #### 四种带默认图标的对话框
2 | 四中对话框的`type`分别为`info`、`success`、`error`、`warning`,各自带有默认图标,并且只有确认键。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Modal/demo/modalDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | `confirm`打开一个具有确定和取消的对话框
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Modal/demo/modalInner.md:
--------------------------------------------------------------------------------
1 | #### 内嵌render的Modal
2 | 写在`render`里的`Modal`,可以动态更新Modal中的内容。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Modal/demo/modalInner.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Modal, Button } from '@yoshino/components/';
3 |
4 | export default class App extends React.Component {
5 | state = {
6 | count: 1,
7 | visible: false,
8 | };
9 |
10 | onClick = () => {
11 | this.setState({
12 | count: this.state.count + 1,
13 | visible: true,
14 | });
15 | }
16 |
17 | render() {
18 | return (
19 |
20 |
21 | this.setState({visible: false})}
25 | okButtonProps={{loading: true}}
26 | />
27 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/docs/pages/components/Modal/index.md:
--------------------------------------------------------------------------------
1 | ## Modal
2 |
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Notification/config.md:
--------------------------------------------------------------------------------
1 | - notification.open(config)
2 | - notification.success(config)
3 | - notification.error(config)
4 | - notification.info(config)
5 | - notification.warn(config)
6 | - notification.close(key: String)
7 | - notification.destroy()
8 |
9 | `open`、`success`、`error`、`info`、`warn`都会返回一个`key`,用于`close`方法来关闭制定窗口。
10 |
11 | config 参数如下:
--------------------------------------------------------------------------------
/docs/pages/components/Notification/demo/notificationCustom.md:
--------------------------------------------------------------------------------
1 | #### config配置
2 | 通知`placenebr`默认`topRight`后自动关闭,可以通过`config`配置修改默认值。
--------------------------------------------------------------------------------
/docs/pages/components/Notification/demo/notificationCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Notification as notification, Button} from '@yoshino/components/';
3 |
4 | export default function() {
5 | const open = () => {
6 | notification.open({
7 | title: 'open',
8 | message: '一般的通知, duration时间长,可以通过close关闭',
9 | duration: 99999999,
10 | key: 111,
11 | });
12 | };
13 |
14 | const placement = () => {
15 | notification.config({
16 | placement: 'topLeft',
17 | });
18 | };
19 |
20 | const close = () => {
21 | notification.close(111);
22 | };
23 |
24 | return (
25 |
26 |
27 |
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Notification/demo/notificationDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 一般通知使用`open`,带有类别以及图标的通知为分别为`success`、`info`、`warning`、`error`,可以使用`destroy`清空所有通知,也可以使用`close`传入`key`关闭指定的通知。通知默认`5 秒`后自动关闭,可以通过`config`配置修改默认值,也可以作为参数传入。
--------------------------------------------------------------------------------
/docs/pages/components/Notification/global.md:
--------------------------------------------------------------------------------
1 | 提供全局配置方法,在调用前提前配置,全局一次生效。
2 |
3 | - notification.config(options)
4 |
5 | ```jsx
6 | notification.config({
7 | placement: 'topLeft',
8 | duration: 2000,
9 | });
10 | ```
--------------------------------------------------------------------------------
/docs/pages/components/Notification/index.md:
--------------------------------------------------------------------------------
1 | ## Notification 通知提醒框
2 | 一般用于展示提醒信息。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Pagination/demo/paginationCustom.md:
--------------------------------------------------------------------------------
1 | #### 受控组件
2 | 受控组件
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Pagination/demo/paginationCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Pagination } from '@yoshino/components/';
3 |
4 | export default class App extends React.Component {
5 | state = {
6 | current: 1,
7 | };
8 |
9 | render() {
10 | return (
11 | {
15 | this.setState({current});
16 | }}
17 | next='下一页'
18 | previous='上一页'
19 | />
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/docs/pages/components/Pagination/demo/paginationDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Pagination/demo/paginationDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Pagination } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/docs/pages/components/Pagination/index.md:
--------------------------------------------------------------------------------
1 | ## Pagination 分页
2 | 用于分割多页内容。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Progress/demo/progressCircle.md:
--------------------------------------------------------------------------------
1 | #### 圆形进度条
2 | 圆形进度的条,可以通过`format`指定进度值显示格式
--------------------------------------------------------------------------------
/docs/pages/components/Progress/demo/progressCircle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Progress, Slider } from '@yoshino/components/';
3 |
4 | export default class App extends React.Component {
5 | state = {
6 | percent: 10,
7 | };
8 |
9 | render() {
10 | const { percent } = this.state;
11 | return (
12 |
13 |
14 |
18 |
19 | this.setState({percent: v})}/>
20 |
21 |
22 | );
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/docs/pages/components/Progress/demo/progressDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
--------------------------------------------------------------------------------
/docs/pages/components/Progress/demo/progressDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Progress } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Progress/index.md:
--------------------------------------------------------------------------------
1 | ## Progress 进度条
2 | 展示当前操作流程进度。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Radio/demo/radioCustom.md:
--------------------------------------------------------------------------------
1 | #### RadioGroup 组合
2 | 通过设置`RadioGroup`配置单选组合框,可以设置`disabled`来禁用某个单选。
--------------------------------------------------------------------------------
/docs/pages/components/Radio/demo/radioDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 基本使用。
--------------------------------------------------------------------------------
/docs/pages/components/Radio/demo/radioDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Radio } from '@yoshino/components/';
3 |
4 | export default class App extends React.Component {
5 | state = {
6 | checked: false,
7 | };
8 |
9 | render() {
10 | const {checked} = this.state;
11 | return (
12 | this.setState({checked: !checked})}
14 | checked={checked}
15 | />
16 | );
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/docs/pages/components/Radio/index.md:
--------------------------------------------------------------------------------
1 | ## Radio 单选按钮
2 | 用于从多个条件中筛选单个选项。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Rate/demo/rateCustom.md:
--------------------------------------------------------------------------------
1 | #### 允许半值以及自定义字符
2 | 设置`half`可以支持选中半星
3 |
4 | 设置`character`可以将星星替换为其他字符,比如字母,数字,字体图标甚至中文。
5 |
6 | 设置`clear`支持清除。
--------------------------------------------------------------------------------
/docs/pages/components/Rate/demo/rateCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Rate, Icon} from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | console.log(`当前得分:${v}`)}/>
8 | }
11 | clear
12 | half
13 | onChange={(v) => console.log(`当前得分:${v}`)}
14 | />
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/docs/pages/components/Rate/demo/rateDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 基本使用
--------------------------------------------------------------------------------
/docs/pages/components/Rate/demo/rateDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Rate } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/Rate/index.md:
--------------------------------------------------------------------------------
1 | ## Rate 评分
2 | 对目标进行评分操作。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Ripple/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'color',
7 | intro: '波纹颜色',
8 | type: 'string',
9 | defaultValue: '-',
10 | },
11 | {
12 | props: 'opacity',
13 | intro: '透明度',
14 | type: 'number',
15 | defaultValue: '0.3',
16 | },
17 | ]
18 | }
19 | ];
20 |
--------------------------------------------------------------------------------
/docs/pages/components/Ripple/demo/rippleCustom.md:
--------------------------------------------------------------------------------
1 | #### 配合其他组件使用
2 | 推荐配合`button`使用,可以提高交互体验。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Ripple/demo/rippleCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Ripple, Icon, Button } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/docs/pages/components/Ripple/demo/rippleDemo.md:
--------------------------------------------------------------------------------
1 | #### 简单的使用
2 | 简单的波纹特效使用
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Ripple/demo/rippleDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Ripple, Card, Icon } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 | 更多
12 | )}
13 | border
14 | shadow
15 | >
16 | 波纹包裹的card
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/docs/pages/components/Ripple/index.md:
--------------------------------------------------------------------------------
1 | ## Ripple 波纹
2 | 用于包裹子组件,点击后有波纹特效。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Select/demo/selectCustom.md:
--------------------------------------------------------------------------------
1 | #### 多选模式
2 |
--------------------------------------------------------------------------------
/docs/pages/components/Select/demo/selectCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Select } from '@yoshino/components/';
3 |
4 | const {Option} = Select;
5 | export default function() {
6 | return (
7 |
8 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/docs/pages/components/Select/demo/selectDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Select/index.md:
--------------------------------------------------------------------------------
1 | ## Select
2 | 下拉选择器,可以进行单选或者多选。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Skeleton/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'loading',
7 | intro: '加载态',
8 | type: 'boolean',
9 | defaultValue: 'true',
10 | },
11 | {
12 | props: 'rows',
13 | intro: '占位行数,为数组的时候可以设置对应行的样式',
14 | type: 'number | React.CSSProperties[]',
15 | defaultValue: '',
16 | },
17 | {
18 | props: 'active',
19 | intro: '是否开始动画效果',
20 | type: 'boolean',
21 | defaultValue: 'false',
22 | },
23 | {
24 | props: 'lastWidth',
25 | intro: 'number',
26 | type: 'number | string',
27 | defaultValue: '80%',
28 | },
29 | ]
30 | }
31 | ];
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Skeleton/demo/skeletonCustom.md:
--------------------------------------------------------------------------------
1 | #### 动画效果
2 | 设置`active`
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Skeleton/demo/skeletonCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Skeleton, Switch } from '@yoshino/components/';
3 |
4 | export default class extends React.Component {
5 | state = {
6 | loading: true,
7 | };
8 |
9 | render() {
10 | const { loading } = this.state;
11 | return (
12 |
13 | 开关:
this.setState({loading: v})}/>
14 |
15 | 111111111111111111111111111111111111
16 | 111111111111111111111111111111111111
17 | 2222222222222222
18 |
19 |
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/docs/pages/components/Skeleton/demo/skeletonDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本
2 | 最简单的占位效果。
--------------------------------------------------------------------------------
/docs/pages/components/Skeleton/demo/skeletonDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Skeleton } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
自定义样式
10 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/docs/pages/components/Skeleton/index.md:
--------------------------------------------------------------------------------
1 | ## Skeleton
2 | 在页面加载未完成时提供一个骨架图,降低白屏时间
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Slider/demo/sliderCustom.md:
--------------------------------------------------------------------------------
1 | #### 自定义受控组件
2 | 可使用`max`、`min`设置最大最小值,通过onChange变化回调控制值。
--------------------------------------------------------------------------------
/docs/pages/components/Slider/demo/sliderCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Slider } from '@yoshino/components/';
3 |
4 | export default class App extends React.Component {
5 | state = {
6 | value: 30,
7 | };
8 |
9 | render() {
10 | return (
11 | {
17 | console.log('当前值:', value);
18 | this.setState({value});
19 | }}
20 | />
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/docs/pages/components/Slider/demo/sliderDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Slider/demo/sliderDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Slider } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/docs/pages/components/Slider/demo/sliderDisabled.md:
--------------------------------------------------------------------------------
1 | #### 禁用状态
2 | 设置`disabled`禁用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Slider/demo/sliderDisabled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Slider } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/docs/pages/components/Slider/index.md:
--------------------------------------------------------------------------------
1 | ## Slider 滑动输入条
2 | 用于拖动选取当前值。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Start/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Component } from 'react';
3 | import * as md from './start.md';
4 | import Markdown from '@docs/components/Markdown/';
5 |
6 | export default class Start extends Component {
7 | render() {
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/components/Steps/demo/stepsCustom.md:
--------------------------------------------------------------------------------
1 | #### 自定义图标
2 | 可以通过`icon`自定义每个步骤的图标。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Steps/demo/stepsCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Steps, Icon } from '@yoshino/components/';
3 |
4 | const StepsItem = Steps.Item;
5 |
6 | export default function() {
7 | return (
8 |
9 | }/>
10 | }/>
11 | }/>
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/components/Steps/demo/stepsDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Steps/demo/stepsError.md:
--------------------------------------------------------------------------------
1 | #### 错误状态
2 | 可以设置错误状态。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Steps/demo/stepsError.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Steps, Icon } from '@yoshino/components/';
3 |
4 | const StepsItem = Steps.Item;
5 |
6 | export default function() {
7 | return (
8 |
9 | }/>
10 | }/>
11 | } status='error'/>
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/components/Steps/demo/stepsVertical.md:
--------------------------------------------------------------------------------
1 | #### 垂直步骤条
2 | 可以设置`direction`来让步骤条垂直显示。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Steps/index.md:
--------------------------------------------------------------------------------
1 | ## Steps 步骤条
2 | 流程状态。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Switch/demo/switchCustom.md:
--------------------------------------------------------------------------------
1 | #### 组件禁用
2 | 设置`disabled`将组件状态设为不可选。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Switch/demo/switchCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Switch } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/docs/pages/components/Switch/demo/switchDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | `default`、`small`两种`size`。
--------------------------------------------------------------------------------
/docs/pages/components/Switch/demo/switchDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Switch } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | alert(`按钮状态:${checked ? '开' : '关'}`)}/>
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Switch/index.md:
--------------------------------------------------------------------------------
1 | ## Switch 开关选择器
2 | 切换开关状态。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Table/demo/tableCustom.md:
--------------------------------------------------------------------------------
1 | #### 锁头锁列的表格
2 | 锁头锁列时如果出现数据不对齐的问题请使用`width`描述表格列的宽度。
3 |
4 | 同时请务必保证所有`width`值和需要小于`scroll.x`。
5 |
6 | 注意:左侧锁列的请放在`columns`数组的头部,右侧锁列的请放在`columns`数组的尾部。
--------------------------------------------------------------------------------
/docs/pages/components/Table/demo/tableDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 数据`data 为一个数组`,`colums`用来描述`data`字段对应的中文以及表头。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Table/demo/tableSortDemo.md:
--------------------------------------------------------------------------------
1 | #### 表格排序
2 | 使用`sorter`和`sortOrder`进行表格自定义排序
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Table/index.md:
--------------------------------------------------------------------------------
1 | ## Table
2 |
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Tabs/demo/tabsCustom.md:
--------------------------------------------------------------------------------
1 | #### 卡片式页签
2 | 卡片式的页签
--------------------------------------------------------------------------------
/docs/pages/components/Tabs/demo/tabsCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Tabs } from '@yoshino/components/';
3 |
4 | const { TabPane } = Tabs;
5 |
6 | export default function() {
7 | return (
8 |
9 |
10 | Content 11111
11 | Content 22222
12 | Content 33333
13 | Content 44444
14 | Content 55555
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/docs/pages/components/Tabs/demo/tabsDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 可以通过`tabPosition`来设置`left`、`top`、`bottom`、`right`来设置`tab`的位置;可以通过`size`控制大小;可以通过`animated`开开关过渡动画。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Tabs/index.md:
--------------------------------------------------------------------------------
1 | ## Tabs
2 | 选项卡切换组件,一般用于平级区域大块内容的的收纳和展现。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Tag/api.tsx:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'API',
4 | json: [
5 | {
6 | props: 'mode',
7 | intro: '标签模式',
8 | type: `'custom' | 'geek'`,
9 | defaultValue: 'custom',
10 | },
11 | {
12 | props: 'color',
13 | intro: '颜色',
14 | type: 'string',
15 | defaultValue: '-',
16 | },
17 | {
18 | props: 'closeable',
19 | intro: '是否可以关闭',
20 | type: 'boolean',
21 | defaultValue: 'false',
22 | },
23 | {
24 | props: 'onClose',
25 | intro: '关闭回调',
26 | type: '() => void',
27 | defaultValue: '-',
28 | },
29 | ]
30 | }
31 | ];
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Tag/demo/tagCustom.md:
--------------------------------------------------------------------------------
1 | #### Geek模式
2 | `geek`模式下根据`color`会生成炫酷的标签。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Tag/demo/tagCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Tag } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 | #108ee9
8 | #87d068
9 | #9e9d24
10 | #ffab91
11 | #b0bec5
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/components/Tag/demo/tagDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Tag/demo/tagDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Tag } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 | 可乐
9 | console.log('关闭了')}>雪碧
10 |
11 |
12 | 冰红茶
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/docs/pages/components/Tag/index.md:
--------------------------------------------------------------------------------
1 | ## Tag 标签
2 | 一般用于描述或者分类。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Theme/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Component } from 'react';
3 | import * as md from './theme.md';
4 | import Markdown from '@docs/components/Markdown/';
5 | import {Alert} from '@yoshino/components/index';
6 |
7 | export default class Start extends Component {
8 | render() {
9 | return (
10 |
19 | );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/docs/pages/components/TimePicker/demo/timePickerCustom.md:
--------------------------------------------------------------------------------
1 | #### 三种尺寸
2 | 设置`size`修改不同尺寸`small`、`default`、`large`。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/TimePicker/demo/timePickerCustom.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { TimePicker } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/docs/pages/components/TimePicker/demo/timePickerDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用
3 |
--------------------------------------------------------------------------------
/docs/pages/components/TimePicker/demo/timePickerDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { TimePicker } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/docs/pages/components/TimePicker/index.md:
--------------------------------------------------------------------------------
1 | ## TimePicker
2 | 当用户需要输入一个时间,可以点击标准输入框,弹出时间面板进行选择。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Timeline/demo/timelineCustom.md:
--------------------------------------------------------------------------------
1 | #### 自定义
2 | 你可以自定义每个子项不同的表现形式。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Timeline/demo/timelineDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Timeline/index.md:
--------------------------------------------------------------------------------
1 | ## Timeline 时间轴
2 | 用于展示不同时间节点上的信息。
3 |
4 | `Timeline`组件用于按时间顺序展示信息
5 |
6 | `Timeline`必须和`Timeline.Item`一起使用!
7 |
8 | 如果不为`Timeline.Item`设定属性,那么`Timeline.Item`对应的属性将从`Timeline`处继承。
9 |
10 | ## 代码演示
11 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/demo/tooltipCustom.md:
--------------------------------------------------------------------------------
1 | #### 位置显示控制
2 | 通过设置`placement`控制气泡显示的位置。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/demo/tooltipDemo.md:
--------------------------------------------------------------------------------
1 | #### 基本使用
2 | 简单的基本使用。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/demo/tooltipDemo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Tooltip } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 | hover显示
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/demo/tooltipState.md:
--------------------------------------------------------------------------------
1 | #### 受控显示
2 | 通过`value`控制`Tooltip`的显示。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/demo/tooltipState.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Tooltip, Switch, Button } from '@yoshino/components/';
3 |
4 | export default class App extends React.Component {
5 | state = {
6 | visible: false,
7 | };
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 | this.setState({visible: !this.state.visible})}
18 | />
19 |
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/demo/tooltipTrigger.md:
--------------------------------------------------------------------------------
1 | #### 触发行为
2 | 通过`trigger`设置触发行为。
3 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/demo/tooltipTrigger.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Tooltip, Button } from '@yoshino/components/';
3 |
4 | export default function() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/docs/pages/components/Tooltip/index.md:
--------------------------------------------------------------------------------
1 | ## Tooltip 文字提示
2 | 文字提示气泡框。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Transitions/demo/index.less:
--------------------------------------------------------------------------------
1 | @import '../../../../../components/styles/var.less';
2 |
3 | .transitions-expand-demo-box {
4 | width: 200px;
5 | background: @primary-color;
6 | color: white;
7 | text-align: center;
8 | margin-top: 10px;
9 | }
10 |
11 | .transitions-slide-demo {
12 | &-box {
13 | height: 220px;
14 | }
15 |
16 | &-left,
17 | &-right,
18 | &-top,
19 | &-bottom {
20 | display: inline-block;
21 | margin-right: 20px;
22 | margin-bottom: 10px;
23 | width: 200px;
24 | height: 100px;
25 | background: @primary-color;
26 | color: white;
27 | line-height: 100px;
28 | text-align: center;
29 | font-size: 24px;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/docs/pages/components/Transitions/demo/transitionsCustom.md:
--------------------------------------------------------------------------------
1 | #### Slide 划入、划出动画
2 | 支持`left`、`right`、`top`、`bottom`四个方向。
--------------------------------------------------------------------------------
/docs/pages/components/Transitions/demo/transitionsDemo.md:
--------------------------------------------------------------------------------
1 | #### Expand 展开、折叠动画
2 | 用于展开、折叠过度,让内容过度更加流畅。
--------------------------------------------------------------------------------
/docs/pages/components/Transitions/demo/transitionsScale.md:
--------------------------------------------------------------------------------
1 | #### Scale 放缩
--------------------------------------------------------------------------------
/docs/pages/components/Transitions/index.md:
--------------------------------------------------------------------------------
1 | ## Transitions 过度动画
2 | `Transitions`是`yoshino`内部的一些通用过度动画,抽离出来供开发者使用。
3 |
4 | ## 代码演示
5 |
--------------------------------------------------------------------------------
/docs/pages/components/Yoshino/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Component } from 'react';
3 | import * as md from './intro.md';
4 | import Markdown from '@docs/components/Markdown/';
5 |
6 | export default class Index extends Component {
7 | render() {
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/docs/pages/themes/screenshot/yoshion-theme-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yoshino-UI/Yoshino/2eb5f30b498e906b3941eef58ab4f8106f3a0bea/docs/pages/themes/screenshot/yoshion-theme-template.png
--------------------------------------------------------------------------------
/docs/pages/themes/themes.ts:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | name: 'yoshion-theme-template',
4 | tags: ['yoshino', 'theme', 'pink'],
5 | rep: 'https://github.com/Yoshino-UI/yoshion-theme-template',
6 | docs: 'https://github.com/Yoshino-UI/yoshion-theme-template',
7 | author: 'ShanaMaid',
8 | preview: 'yoshion-theme-template.png',
9 | desc: '这是一个官方的示例主题,请勿使用',
10 | }
11 | ];
12 |
--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "include": [
4 | ".",
5 | ],
6 | }
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | require('postcss-import'),
4 | require('postcss-cssnext'),
5 | require('postcss-nested'),
6 | // require('postcss-px2rem')({ remUnit: 16 }),
7 | require('postcss-remove-root'),
8 | ],
9 | };
10 |
--------------------------------------------------------------------------------
/scripts/allComponents.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const fs = require('fs');
3 |
4 | // 组件目录
5 | const componentsPath = path.resolve(__dirname, '../components/');
6 |
7 | const dir = fs.readdirSync(componentsPath);
8 | const dirSet = new Set(dir);
9 |
10 | // 删除非组件目录
11 | dirSet.delete('styles');
12 | dirSet.delete('template');
13 | dirSet.delete('utils');
14 | dirSet.delete('.DS_Store');
15 | dirSet.delete('index.tsx');
16 | dirSet.delete('tsconfig.json');
17 | dirSet.delete('global.d.ts');
18 |
19 |
20 | const arr = Array.from(dirSet);
21 |
22 | module.exports = arr;
--------------------------------------------------------------------------------
/scripts/jest.setup.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | global.requestAnimationFrame = (callback) => {
4 | return setTimeout(callback, 0);
5 | };
6 |
7 | global.cancelAnimationFrame = (num) => {
8 | return clearTimeout(num);
9 | };
10 |
11 | module.exports = {
12 | // 用于 Jest 忽略 SCSS 文件
13 | process(src, filename) {
14 | return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/scripts/updateEntry.js:
--------------------------------------------------------------------------------
1 | // 生成index.tsx
2 | const allComponents = require('./allComponents');
3 | const fs = require('fs');
4 | const path = require('path');
5 |
6 | // 组件目录
7 | const componentsPath = path.resolve(__dirname, '../components/');
8 |
9 | // 删除index.tsx
10 | if (fs.existsSync(path.resolve(componentsPath, './index.tsx'))) {
11 | fs.unlinkSync(path.resolve(componentsPath, './index.tsx'));
12 | }
13 |
14 | let importStr = '';
15 | let exportStr = `export {\r\n`;
16 | allComponents.forEach((item) => {
17 | importStr += `import ${item} from './${item}';\r\n`;
18 | exportStr += ` ${item},\r\n`;
19 | })
20 |
21 | importStr += `\r\n`;
22 | exportStr += ` };\r\n`;
23 | fs.writeFileSync(path.resolve(componentsPath, './index.tsx'), importStr + exportStr);
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "tslint:recommended",
4 | "tslint-react"
5 | ],
6 | "rules": {
7 | "indent": [
8 | true,
9 | "spaces"
10 | ],
11 | "quotemark": [
12 | true,
13 | "single"
14 | ],
15 | "member-access": false,
16 | "member-ordering": false,
17 | "ordered-imports": false,
18 | "object-literal-sort-keys": false,
19 | "no-empty-interface": false,
20 | "no-any": true,
21 | "jsx-no-multiline-js": false,
22 | "jsx-no-lambda": false,
23 | "jsx-boolean-value": false,
24 | "trailing-comma": false,
25 | "no-shadowed-variable": false,
26 | "no-var-requires": false,
27 | "max-line-length": false,
28 | "no-console": false,
29 | "prefer-for-of": false
30 | }
31 | }
32 |
--------------------------------------------------------------------------------