├── .nvmrc ├── .watchmanconfig ├── components ├── icon │ ├── icon.scss │ ├── index.ts │ ├── demo.tsx │ └── commutiy │ │ └── doc.md ├── col │ ├── index.ts │ └── col.tsx ├── row │ └── index.ts ├── tag │ ├── index.ts │ └── styles.ts ├── badge │ ├── index.ts │ ├── styles.ts │ └── demo.tsx ├── card │ ├── index.ts │ └── styles.ts ├── cell │ ├── index.ts │ └── styles.ts ├── dialog │ ├── index.ts │ └── config.ts ├── drag │ └── index.ts ├── empty │ ├── index.ts │ └── styles.ts ├── grid │ ├── index.ts │ └── styles.ts ├── input │ └── index.ts ├── notify │ ├── index.ts │ └── styles.ts ├── popup │ ├── index.ts │ └── styles.ts ├── price │ ├── index.ts │ └── styles.ts ├── radio │ ├── index.ts │ ├── context.ts │ └── styles.ts ├── rate │ ├── index.ts │ └── styles.ts ├── step │ ├── index.ts │ └── styles.ts ├── steps │ ├── index.ts │ ├── UserContext.ts │ └── steps.tsx ├── swipe │ ├── index.ts │ └── styles.ts ├── table │ ├── index.ts │ └── styles.ts ├── toast │ └── index.ts ├── button │ └── index.ts ├── navbar │ └── index.ts ├── portal │ ├── index.tsx │ ├── portal-consumer.tsx │ ├── portal.tsx │ └── portal-manager.tsx ├── swiper │ ├── index.ts │ ├── userContext.ts │ └── styles.ts ├── switch │ ├── index.ts │ ├── button.tsx │ ├── view.tsx │ ├── useAnimations.tsx │ └── styles.ts ├── tabbar │ ├── index.ts │ └── styles.ts ├── backtop │ ├── index.ts │ ├── styles.ts │ └── backtop.tsx ├── divider │ ├── index.ts │ └── styles.ts ├── overlay │ ├── index.ts │ └── styles.ts ├── calendar │ └── index.ts ├── checkbox │ ├── index.ts │ └── styles.ts ├── collapse │ └── index.ts ├── configprovider │ ├── styles │ │ ├── index.tsx │ │ └── colors.ts │ ├── index.ts │ ├── commutiy │ │ ├── doc.md │ │ ├── doc.zh-TW.md │ │ └── doc.en-US.md │ ├── jd │ │ ├── doc.md │ │ ├── doc.zh-TW.md │ │ └── doc.en-US.md │ └── configprovider.tsx ├── elevator │ └── index.ts ├── ellipsis │ ├── index.ts │ ├── demo.tsx │ └── ellipsis.tsx ├── fixednav │ └── index.ts ├── griditem │ ├── index.ts │ └── styles.ts ├── progress │ ├── index.ts │ └── styles.ts ├── skeleton │ ├── index.ts │ └── styles.ts ├── textarea │ ├── index.ts │ └── styles.ts ├── cellgroup │ ├── index.ts │ ├── styles.ts │ └── cellgroup.tsx ├── countdown │ ├── index.ts │ └── styles.ts ├── image │ ├── index.ts │ └── styles.ts ├── indicator │ └── index.ts ├── noticebar │ ├── index.ts │ └── styles.ts ├── pagination │ └── index.ts ├── radiogroup │ ├── index.ts │ └── styles.ts ├── searchbar │ ├── index.ts │ └── styles.ts ├── sidenavbar │ ├── index.ts │ ├── offsetContext.ts │ └── styles.ts ├── swiperitem │ ├── index.ts │ ├── styles.ts │ └── swiperitem.tsx ├── tabbaritem │ └── index.ts ├── timepannel │ ├── index.ts │ ├── styles.ts │ └── timepannel.tsx ├── timeselect │ ├── index.ts │ └── styles.ts ├── trendarrow │ ├── index.ts │ └── styles.ts ├── actionsheet │ ├── index.ts │ └── styles.ts ├── avatargroup │ ├── index.ts │ ├── avatarContext.ts │ ├── styles.ts │ └── avatargroup.tsx ├── inputnumber │ ├── index.ts │ └── styles.ts ├── virtuallist │ ├── index.ts │ ├── type.ts │ └── virtuallist.tsx ├── calendaritem │ └── index.ts ├── collapseitem │ ├── index.ts │ └── styles.ts ├── checkboxgroup │ ├── index.ts │ └── styles.ts ├── subsidenavbar │ ├── index.ts │ ├── subsidenavbar.tsx │ └── styles.ts ├── sidenavbaritem │ ├── index.ts │ ├── styles.ts │ └── sidenavbaritem.tsx ├── timedetail │ ├── index.ts │ └── styles.ts ├── avatar │ ├── index.ts │ ├── styles.ts │ └── demo.tsx ├── utils │ ├── img-url │ │ └── tag.json │ ├── px.ts │ ├── style-to-obj.ts │ ├── img.ts │ ├── raf.ts │ ├── filter-border-style.ts │ ├── filter-width-height.ts │ ├── pt.ts │ ├── filter-text-style.ts │ ├── get-border-radius-value.ts │ ├── typings.ts │ ├── filter-size-padding-container.ts │ ├── statusBarHeight.ts │ ├── filter-size-margin-container.ts │ ├── filter-container-style-without-border.ts │ ├── filter-container-style.ts │ ├── deviceHeight.ts │ ├── deviceWidth.ts │ ├── use-client-rect.ts │ ├── iphone-x.ts │ └── index.ts └── hooks │ ├── useLocale.ts │ └── useTranslate.ts ├── CHANGELOG.md ├── sites ├── vite-env.d.ts ├── components │ ├── nav │ │ ├── index.ts │ │ ├── nav.tsx │ │ └── nav.scss │ ├── title │ │ ├── index.ts │ │ ├── title.scss │ │ └── title.tsx │ ├── header │ │ ├── index.ts │ │ └── header.tsx │ ├── issue │ │ ├── index.ts │ │ ├── issue.scss │ │ └── issue.tsx │ ├── styles │ │ ├── mixins │ │ │ ├── index.scss │ │ │ ├── text-ellipsis.scss │ │ │ └── make-animation.scss │ │ ├── font │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ └── iconfont.woff2 │ │ └── animation │ │ │ ├── index.scss │ │ │ ├── rotate.scss │ │ │ ├── fade.scss │ │ │ ├── ease.scss │ │ │ ├── zoom.scss │ │ │ └── drop.scss │ ├── demo-preview │ │ ├── index.ts │ │ ├── demo-preview.scss │ │ └── demo-preview.tsx │ ├── icon │ │ ├── index.ts │ │ ├── bem.ts │ │ ├── demo.scss │ │ └── icon.tsx │ ├── demo-block │ │ ├── index.ts │ │ ├── basedUtil.ts │ │ ├── demo-block.scss │ │ └── demo-block.tsx │ └── remark │ │ └── index.tsx ├── assets │ ├── images │ │ ├── order.png │ │ ├── img-joy.png │ │ ├── logo-red.png │ │ ├── bg-article.png │ │ ├── cat-title.png │ │ ├── header-bg.png │ │ ├── icon-color.png │ │ ├── icon-gitee.png │ │ ├── icon-title.png │ │ ├── icon-user.png │ │ ├── item-active.png │ │ ├── left-arrow.png │ │ ├── logo-blue.png │ │ ├── right-arrow.png │ │ ├── input-search.png │ │ ├── iphone-cases.png │ │ ├── icon-footer-vx.png │ │ ├── logo-header-red.png │ │ ├── item-rotate-active.png │ │ ├── logo-header-white.png │ │ ├── icon-select-gray-down.png │ │ ├── icon-select-gray-up.png │ │ ├── icon-select-white-up.png │ │ └── icon-select-white-down.png │ ├── locales │ │ └── README.md │ ├── locale │ │ ├── index.ts │ │ └── useLocale.ts │ └── styles │ │ ├── highlight.scss │ │ └── reset.scss ├── main.tsx ├── markdown-plugin │ └── my-remark-plugin.ts ├── config │ └── env.ts └── App.tsx ├── .npmignore ├── .gitattributes ├── demo ├── assets │ ├── icon.png │ ├── splash.png │ ├── favicon.png │ └── adaptive-icon.png ├── .gitignore ├── tsconfig.json ├── components │ └── Theme.tsx ├── babel.config.js ├── app.json ├── webpack.config.js ├── metro.config.js ├── package.json └── App.tsx ├── .yarnrc ├── vite.config.ts ├── tsconfig.node.json ├── vite ├── vite.base.config.ts ├── config.ts ├── vite.dev.config.ts └── vite.prod.config.ts ├── .editorconfig ├── lefthook.yml ├── tsconfig.json ├── .github ├── actions │ └── setup │ │ └── action.yml ├── workflows │ ├── sync-docs.yml │ ├── ci.yml │ └── publish.yml └── dependabot.yml ├── scripts ├── bootstrap.js ├── generate-jd-nutui.js └── generate-nutui.js ├── .gitignore └── LICENSE /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.18.1 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /components/icon/icon.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.0.8 (2023-06-14) -------------------------------------------------------------------------------- /sites/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo/ 2 | example/ 3 | scripts/ 4 | dist/ 5 | index.html 6 | vite/ -------------------------------------------------------------------------------- /components/col/index.ts: -------------------------------------------------------------------------------- 1 | import { Col } from './col' 2 | 3 | export default Col 4 | -------------------------------------------------------------------------------- /components/row/index.ts: -------------------------------------------------------------------------------- 1 | import { Row } from './row'; 2 | 3 | export default Row; 4 | -------------------------------------------------------------------------------- /components/tag/index.ts: -------------------------------------------------------------------------------- 1 | import { Tag } from './tag'; 2 | 3 | export default Tag; 4 | -------------------------------------------------------------------------------- /sites/components/nav/index.ts: -------------------------------------------------------------------------------- 1 | import Nav from './nav'; 2 | 3 | export default Nav; 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import { Badge } from './badge'; 2 | 3 | export default Badge; 4 | -------------------------------------------------------------------------------- /components/card/index.ts: -------------------------------------------------------------------------------- 1 | import { Card } from './card'; 2 | 3 | export default Card; 4 | -------------------------------------------------------------------------------- /components/cell/index.ts: -------------------------------------------------------------------------------- 1 | import { Cell } from './cell'; 2 | 3 | export default Cell; 4 | -------------------------------------------------------------------------------- /components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | import Dialog from './dialog'; 2 | 3 | export default Dialog; 4 | -------------------------------------------------------------------------------- /components/drag/index.ts: -------------------------------------------------------------------------------- 1 | import { Drag } from './drag'; 2 | 3 | export default Drag; 4 | -------------------------------------------------------------------------------- /components/empty/index.ts: -------------------------------------------------------------------------------- 1 | import { Empty } from './empty'; 2 | 3 | export default Empty; 4 | -------------------------------------------------------------------------------- /components/grid/index.ts: -------------------------------------------------------------------------------- 1 | import { Grid } from './grid'; 2 | 3 | export default Grid; 4 | -------------------------------------------------------------------------------- /components/icon/index.ts: -------------------------------------------------------------------------------- 1 | import { Icon } from './icon'; 2 | 3 | export default Icon; 4 | -------------------------------------------------------------------------------- /components/input/index.ts: -------------------------------------------------------------------------------- 1 | import { Input } from './input'; 2 | 3 | export default Input; 4 | -------------------------------------------------------------------------------- /components/notify/index.ts: -------------------------------------------------------------------------------- 1 | import Notify from './notify'; 2 | 3 | export default Notify; 4 | -------------------------------------------------------------------------------- /components/popup/index.ts: -------------------------------------------------------------------------------- 1 | import { Popup } from './popup'; 2 | 3 | export default Popup; 4 | -------------------------------------------------------------------------------- /components/price/index.ts: -------------------------------------------------------------------------------- 1 | import { Price } from './price'; 2 | 3 | export default Price; 4 | -------------------------------------------------------------------------------- /components/radio/index.ts: -------------------------------------------------------------------------------- 1 | import { Radio } from './radio'; 2 | 3 | export default Radio; 4 | -------------------------------------------------------------------------------- /components/rate/index.ts: -------------------------------------------------------------------------------- 1 | import { Rate } from './rate'; 2 | 3 | export default Rate; 4 | -------------------------------------------------------------------------------- /components/step/index.ts: -------------------------------------------------------------------------------- 1 | import { Step } from './step'; 2 | 3 | export default Step; 4 | -------------------------------------------------------------------------------- /components/steps/index.ts: -------------------------------------------------------------------------------- 1 | import { Steps } from './steps'; 2 | 3 | export default Steps; 4 | -------------------------------------------------------------------------------- /components/swipe/index.ts: -------------------------------------------------------------------------------- 1 | import { Swipe } from './swipe'; 2 | 3 | export default Swipe; 4 | -------------------------------------------------------------------------------- /components/table/index.ts: -------------------------------------------------------------------------------- 1 | import { Table } from './table'; 2 | 3 | export default Table; 4 | -------------------------------------------------------------------------------- /components/toast/index.ts: -------------------------------------------------------------------------------- 1 | import { Toast } from './toast'; 2 | 3 | export default Toast; 4 | -------------------------------------------------------------------------------- /sites/components/title/index.ts: -------------------------------------------------------------------------------- 1 | import Title from "./title"; 2 | 3 | export default Title; -------------------------------------------------------------------------------- /components/button/index.ts: -------------------------------------------------------------------------------- 1 | import { Button } from './button'; 2 | 3 | export default Button; 4 | -------------------------------------------------------------------------------- /components/navbar/index.ts: -------------------------------------------------------------------------------- 1 | import { NavBar } from './navbar'; 2 | 3 | export default NavBar; 4 | -------------------------------------------------------------------------------- /components/portal/index.tsx: -------------------------------------------------------------------------------- 1 | import Portal from './portal'; 2 | 3 | export default Portal; 4 | -------------------------------------------------------------------------------- /components/swiper/index.ts: -------------------------------------------------------------------------------- 1 | import { Swiper } from './swiper'; 2 | 3 | export default Swiper; 4 | -------------------------------------------------------------------------------- /components/switch/index.ts: -------------------------------------------------------------------------------- 1 | import { Switch } from './switch'; 2 | 3 | export default Switch; 4 | -------------------------------------------------------------------------------- /components/tabbar/index.ts: -------------------------------------------------------------------------------- 1 | import { Tabbar } from './tabbar'; 2 | 3 | export default Tabbar; 4 | -------------------------------------------------------------------------------- /sites/components/header/index.ts: -------------------------------------------------------------------------------- 1 | import Header from './header'; 2 | export default Header; 3 | -------------------------------------------------------------------------------- /sites/components/issue/index.ts: -------------------------------------------------------------------------------- 1 | import Issue from './issue'; 2 | 3 | export default Issue; 4 | -------------------------------------------------------------------------------- /components/backtop/index.ts: -------------------------------------------------------------------------------- 1 | import { BackTop } from './backtop'; 2 | 3 | export default BackTop; 4 | -------------------------------------------------------------------------------- /components/divider/index.ts: -------------------------------------------------------------------------------- 1 | import { Divider } from './divider'; 2 | 3 | export default Divider; 4 | -------------------------------------------------------------------------------- /components/overlay/index.ts: -------------------------------------------------------------------------------- 1 | import { Overlay } from './overlay'; 2 | 3 | export default Overlay; 4 | -------------------------------------------------------------------------------- /components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | import { Calendar } from './calendar'; 2 | 3 | export default Calendar; 4 | -------------------------------------------------------------------------------- /components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import { Checkbox } from './checkbox'; 2 | 3 | export default Checkbox; 4 | -------------------------------------------------------------------------------- /components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import { Collapse } from './collapse'; 2 | 3 | export default Collapse; 4 | -------------------------------------------------------------------------------- /components/configprovider/styles/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as theme } from './themes/default'; 2 | 3 | -------------------------------------------------------------------------------- /components/elevator/index.ts: -------------------------------------------------------------------------------- 1 | import { Elevator } from './elevator'; 2 | 3 | export default Elevator; 4 | -------------------------------------------------------------------------------- /components/ellipsis/index.ts: -------------------------------------------------------------------------------- 1 | import { Ellipsis } from './ellipsis'; 2 | 3 | export default Ellipsis; 4 | -------------------------------------------------------------------------------- /components/fixednav/index.ts: -------------------------------------------------------------------------------- 1 | import { FixedNav } from './fixednav'; 2 | 3 | export default FixedNav; 4 | -------------------------------------------------------------------------------- /components/griditem/index.ts: -------------------------------------------------------------------------------- 1 | import { GridItem } from './griditem'; 2 | 3 | export default GridItem; 4 | -------------------------------------------------------------------------------- /components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import { Progress } from './progress'; 2 | 3 | export default Progress; 4 | -------------------------------------------------------------------------------- /components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import { Skeleton } from './skeleton'; 2 | 3 | export default Skeleton; 4 | -------------------------------------------------------------------------------- /components/textarea/index.ts: -------------------------------------------------------------------------------- 1 | import { TextArea } from './textarea'; 2 | 3 | export default TextArea; 4 | -------------------------------------------------------------------------------- /demo/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/demo/assets/icon.png -------------------------------------------------------------------------------- /components/cellgroup/index.ts: -------------------------------------------------------------------------------- 1 | import { CellGroup } from './cellgroup'; 2 | 3 | export default CellGroup; 4 | -------------------------------------------------------------------------------- /components/countdown/index.ts: -------------------------------------------------------------------------------- 1 | import { CountDown } from './countdown'; 2 | 3 | export default CountDown; 4 | -------------------------------------------------------------------------------- /components/image/index.ts: -------------------------------------------------------------------------------- 1 | import { ImageComponent as Image } from './image'; 2 | 3 | export default Image; 4 | -------------------------------------------------------------------------------- /components/indicator/index.ts: -------------------------------------------------------------------------------- 1 | import { Indicator } from './indicator'; 2 | 3 | export default Indicator; 4 | -------------------------------------------------------------------------------- /components/noticebar/index.ts: -------------------------------------------------------------------------------- 1 | import { NoticeBar } from './noticebar'; 2 | 3 | export default NoticeBar; 4 | -------------------------------------------------------------------------------- /components/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import { Pagination } from './pagination'; 2 | 3 | export default Pagination; 4 | -------------------------------------------------------------------------------- /components/radiogroup/index.ts: -------------------------------------------------------------------------------- 1 | import { RadioGroup } from './radiogroup'; 2 | 3 | export default RadioGroup; 4 | -------------------------------------------------------------------------------- /components/searchbar/index.ts: -------------------------------------------------------------------------------- 1 | import { SearchBar } from './searchbar'; 2 | 3 | export default SearchBar; 4 | -------------------------------------------------------------------------------- /components/sidenavbar/index.ts: -------------------------------------------------------------------------------- 1 | import { SideNavBar } from './sidenavbar'; 2 | 3 | export default SideNavBar; 4 | -------------------------------------------------------------------------------- /components/swiperitem/index.ts: -------------------------------------------------------------------------------- 1 | import { SwiperItem } from './swiperitem'; 2 | 3 | export default SwiperItem; 4 | -------------------------------------------------------------------------------- /components/tabbaritem/index.ts: -------------------------------------------------------------------------------- 1 | import { TabbarItem } from './tabbaritem'; 2 | 3 | export default TabbarItem; 4 | -------------------------------------------------------------------------------- /components/timepannel/index.ts: -------------------------------------------------------------------------------- 1 | import { TimePannel } from './timepannel' 2 | 3 | export default TimePannel 4 | -------------------------------------------------------------------------------- /components/timeselect/index.ts: -------------------------------------------------------------------------------- 1 | import { TimeSelect } from './timeselect' 2 | 3 | export default TimeSelect; 4 | -------------------------------------------------------------------------------- /components/trendarrow/index.ts: -------------------------------------------------------------------------------- 1 | import { TrendArrow } from './trendarrow'; 2 | 3 | export default TrendArrow; 4 | -------------------------------------------------------------------------------- /demo/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/demo/assets/splash.png -------------------------------------------------------------------------------- /sites/components/styles/mixins/index.scss: -------------------------------------------------------------------------------- 1 | @import 'make-animation.scss'; 2 | @import 'text-ellipsis.scss'; 3 | -------------------------------------------------------------------------------- /components/actionsheet/index.ts: -------------------------------------------------------------------------------- 1 | import { ActionSheet } from './actionsheet'; 2 | 3 | export default ActionSheet; 4 | -------------------------------------------------------------------------------- /components/avatargroup/index.ts: -------------------------------------------------------------------------------- 1 | import { AvatarGroup } from './avatargroup'; 2 | 3 | export default AvatarGroup; 4 | -------------------------------------------------------------------------------- /components/inputnumber/index.ts: -------------------------------------------------------------------------------- 1 | import { InputNumber } from './inputnumber'; 2 | 3 | export default InputNumber; 4 | -------------------------------------------------------------------------------- /components/virtuallist/index.ts: -------------------------------------------------------------------------------- 1 | import { VirtualList } from './virtuallist'; 2 | 3 | export default VirtualList; 4 | -------------------------------------------------------------------------------- /demo/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/demo/assets/favicon.png -------------------------------------------------------------------------------- /sites/components/demo-preview/index.ts: -------------------------------------------------------------------------------- 1 | import DemoPreview from './demo-preview' 2 | 3 | export default DemoPreview -------------------------------------------------------------------------------- /components/calendaritem/index.ts: -------------------------------------------------------------------------------- 1 | import { CalendarItem } from './calendaritem'; 2 | 3 | export default CalendarItem; 4 | -------------------------------------------------------------------------------- /components/collapseitem/index.ts: -------------------------------------------------------------------------------- 1 | import { CollapseItem } from './collapseitem'; 2 | 3 | export default CollapseItem; 4 | -------------------------------------------------------------------------------- /sites/components/icon/index.ts: -------------------------------------------------------------------------------- 1 | import { Icon } from './icon'; 2 | import './icon.scss'; 3 | 4 | export default Icon; 5 | -------------------------------------------------------------------------------- /components/checkboxgroup/index.ts: -------------------------------------------------------------------------------- 1 | import { CheckboxGroup } from './checkboxgroup'; 2 | 3 | export default CheckboxGroup; 4 | -------------------------------------------------------------------------------- /components/subsidenavbar/index.ts: -------------------------------------------------------------------------------- 1 | import { SubSideNavBar } from './subsidenavbar'; 2 | 3 | export default SubSideNavBar; 4 | -------------------------------------------------------------------------------- /demo/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/demo/assets/adaptive-icon.png -------------------------------------------------------------------------------- /sites/assets/images/order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/order.png -------------------------------------------------------------------------------- /components/sidenavbaritem/index.ts: -------------------------------------------------------------------------------- 1 | import { SideNavBarItem } from './sidenavbaritem'; 2 | 3 | export default SideNavBarItem; 4 | -------------------------------------------------------------------------------- /components/steps/UserContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const DataContext = createContext({}); 4 | -------------------------------------------------------------------------------- /components/swiper/userContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const DataContext = createContext({}); 4 | -------------------------------------------------------------------------------- /sites/assets/images/img-joy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/img-joy.png -------------------------------------------------------------------------------- /sites/assets/images/logo-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/logo-red.png -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | # Override Yarn command so we can automatically setup the repo on running `yarn` 2 | 3 | yarn-path "scripts/bootstrap.js" 4 | -------------------------------------------------------------------------------- /components/sidenavbar/offsetContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const OffsetContext = createContext(20); 4 | -------------------------------------------------------------------------------- /sites/assets/images/bg-article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/bg-article.png -------------------------------------------------------------------------------- /sites/assets/images/cat-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/cat-title.png -------------------------------------------------------------------------------- /sites/assets/images/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/header-bg.png -------------------------------------------------------------------------------- /sites/assets/images/icon-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-color.png -------------------------------------------------------------------------------- /sites/assets/images/icon-gitee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-gitee.png -------------------------------------------------------------------------------- /sites/assets/images/icon-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-title.png -------------------------------------------------------------------------------- /sites/assets/images/icon-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-user.png -------------------------------------------------------------------------------- /sites/assets/images/item-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/item-active.png -------------------------------------------------------------------------------- /sites/assets/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/left-arrow.png -------------------------------------------------------------------------------- /sites/assets/images/logo-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/logo-blue.png -------------------------------------------------------------------------------- /sites/assets/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/right-arrow.png -------------------------------------------------------------------------------- /sites/components/demo-block/index.ts: -------------------------------------------------------------------------------- 1 | import DemoBlock from './demo-block' 2 | import './demo-block.scss' 3 | export default DemoBlock 4 | -------------------------------------------------------------------------------- /components/avatargroup/avatarContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const AvatarContext = createContext({}); 4 | -------------------------------------------------------------------------------- /sites/assets/images/input-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/input-search.png -------------------------------------------------------------------------------- /sites/assets/images/iphone-cases.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/iphone-cases.png -------------------------------------------------------------------------------- /sites/assets/images/icon-footer-vx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-footer-vx.png -------------------------------------------------------------------------------- /sites/assets/images/logo-header-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/logo-header-red.png -------------------------------------------------------------------------------- /components/timedetail/index.ts: -------------------------------------------------------------------------------- 1 | import { TimeDetail, TimeType } from './timedetail'; 2 | 3 | export default TimeDetail; 4 | export type { TimeType }; 5 | -------------------------------------------------------------------------------- /sites/assets/images/item-rotate-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/item-rotate-active.png -------------------------------------------------------------------------------- /sites/assets/images/logo-header-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/logo-header-white.png -------------------------------------------------------------------------------- /sites/components/styles/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/components/styles/font/iconfont.eot -------------------------------------------------------------------------------- /sites/components/styles/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/components/styles/font/iconfont.ttf -------------------------------------------------------------------------------- /sites/components/styles/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/components/styles/font/iconfont.woff -------------------------------------------------------------------------------- /components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | import { Avatar, AvatarProps } from './avatar'; 2 | 3 | export default Avatar; 4 | 5 | export type { AvatarProps }; 6 | 7 | 8 | -------------------------------------------------------------------------------- /sites/assets/images/icon-select-gray-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-select-gray-down.png -------------------------------------------------------------------------------- /sites/assets/images/icon-select-gray-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-select-gray-up.png -------------------------------------------------------------------------------- /sites/assets/images/icon-select-white-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-select-white-up.png -------------------------------------------------------------------------------- /sites/components/styles/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/components/styles/font/iconfont.woff2 -------------------------------------------------------------------------------- /sites/assets/images/icon-select-white-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/nutui-react-native/HEAD/sites/assets/images/icon-select-white-down.png -------------------------------------------------------------------------------- /components/utils/img-url/tag.json: -------------------------------------------------------------------------------- 1 | { 2 | "tag_close": "https://img13.360buyimg.com/imagetools/jfs/t1/161208/29/33187/730/637d8b2cEc6437a3e/8cc462637d2af61e.png" 3 | } -------------------------------------------------------------------------------- /sites/components/icon/bem.ts: -------------------------------------------------------------------------------- 1 | import { withNaming } from '@bem-react/classname'; 2 | 3 | const cn = withNaming({ n: 'nut-', e: '__', m: '--', v: '-' }); 4 | 5 | export default cn; 6 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import config from './vite/config'; 3 | 4 | export default defineConfig(({ mode }) => { 5 | return config({ mode }); 6 | }); 7 | -------------------------------------------------------------------------------- /components/radio/context.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const radioContext = { 4 | onChange: (val: any) => {} 5 | }; 6 | 7 | export default React.createContext(radioContext); 8 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /sites/components/styles/animation/index.scss: -------------------------------------------------------------------------------- 1 | // Animation 2 | @import 'fade.scss'; 3 | @import 'zoom.scss'; 4 | @import 'ease.scss'; 5 | @import 'drop.scss'; 6 | @import 'rotate.scss'; 7 | @import 'icon.scss'; 8 | -------------------------------------------------------------------------------- /components/checkboxgroup/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default () => { 4 | return StyleSheet.create({ 5 | container: { 6 | flexDirection: 'column' 7 | } 8 | }); 9 | }; 10 | -------------------------------------------------------------------------------- /components/utils/px.ts: -------------------------------------------------------------------------------- 1 | import { 2 | PixelRatio 3 | } from 'react-native'; 4 | 5 | const pr = PixelRatio.get() + ''; 6 | const dpr = parseInt(pr, 10) || 1; 7 | const px = (num: number): number => num / dpr; 8 | export default px; 9 | -------------------------------------------------------------------------------- /components/rate/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => 4 | StyleSheet.create({ 5 | nut_rate_container: { 6 | flexDirection:'row', 7 | alignItems:'center' 8 | } 9 | }); -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /sites/components/styles/animation/rotate.scss: -------------------------------------------------------------------------------- 1 | @keyframes rotation { 2 | 0% { 3 | -webkit-transform: rotate(0deg); 4 | } 5 | 100% { 6 | -webkit-transform: rotate(360deg); 7 | } 8 | } 9 | 10 | @include make-animation(nutRotate); 11 | -------------------------------------------------------------------------------- /components/swiperitem/styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleSheet 3 | } from 'react-native'; 4 | 5 | export default () => { 6 | return StyleSheet.create({ 7 | item: { 8 | width: '100%', 9 | height: '100%' 10 | } 11 | }); 12 | }; 13 | -------------------------------------------------------------------------------- /components/countdown/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default () => { 4 | return StyleSheet.create({ 5 | container: { 6 | flexDirection: 'row', 7 | alignItems: 'center' 8 | } 9 | }); 10 | }; 11 | -------------------------------------------------------------------------------- /components/utils/style-to-obj.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleSheet 3 | } from 'react-native'; 4 | 5 | export default (style = {}) => { 6 | if (style instanceof Array) { 7 | return StyleSheet.flatten(style); 8 | } 9 | return style; 10 | }; 11 | -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | // "react-native-linear-gradient": ["node_modules/expo-linear-gradient/build/index.js"], 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /components/configprovider/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ConfigProvider, 3 | useConfig, 4 | setDefaultConfig, 5 | getDefaultConfig 6 | } from './configprovider'; 7 | 8 | export { useConfig, setDefaultConfig, getDefaultConfig }; 9 | export default ConfigProvider; 10 | -------------------------------------------------------------------------------- /components/utils/img.ts: -------------------------------------------------------------------------------- 1 | import tag from './img-url/tag.json'; 2 | import icon from './img-url/icon.json'; 3 | 4 | const imgUrlList = Object.assign(tag, icon);// 所有图片 5 | 6 | const getImageUrl = (key) => { 7 | return imgUrlList[key]; 8 | }; 9 | 10 | export default getImageUrl; 11 | -------------------------------------------------------------------------------- /sites/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import '@/sites/assets/styles/reset.scss' 4 | import '@/sites/assets/styles/md-style.scss' 5 | import App from './App' 6 | 7 | ReactDOM.createRoot(document.getElementById('doc') as HTMLElement) 8 | .render() 9 | -------------------------------------------------------------------------------- /components/grid/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => 4 | StyleSheet.create({ 5 | nut_grid_container: { 6 | flexDirection: 'row', 7 | backgroundColor: theme['$grid-bg-color'], 8 | flexWrap: 'wrap', 9 | width: '100%' 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /sites/components/styles/animation/fade.scss: -------------------------------------------------------------------------------- 1 | @keyframes nutFadeIn { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @keyframes nutFadeOut { 12 | from { 13 | opacity: 1; 14 | } 15 | 16 | to { 17 | opacity: 0; 18 | } 19 | } 20 | @include make-animation(nutFade); 21 | -------------------------------------------------------------------------------- /vite/vite.base.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import path from 'path'; 4 | const { resolve } = path; 5 | 6 | export default defineConfig({ 7 | resolve: { 8 | alias: [{ find: '@', replacement: resolve(__dirname, '..') }], 9 | }, 10 | plugins: [react()], 11 | }); 12 | -------------------------------------------------------------------------------- /components/avatargroup/styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleSheet 3 | } from 'react-native'; 4 | 5 | export default () => { 6 | return StyleSheet.create({ 7 | container: { 8 | position: 'relative', 9 | flexDirection: 'row', 10 | flexGrow: 0, 11 | flexShrink: 0, 12 | flexBasis: 'auto' 13 | } 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /components/radiogroup/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default () => { 4 | return StyleSheet.create({ 5 | directionhorizontal: { 6 | flexDirection: 'row', 7 | alignItems: 'center', 8 | flexWrap: 'wrap' 9 | }, 10 | directionvertical: { 11 | flexDirection: 'column' 12 | } 13 | }); 14 | }; 15 | -------------------------------------------------------------------------------- /components/overlay/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => 4 | StyleSheet.create({ 5 | nut_overlay_full: { 6 | width: '100%', 7 | height: '100%', 8 | }, 9 | nut_overlay_full_bg: { 10 | width: '100%', 11 | height: '100%', 12 | backgroundColor:theme['$overlay-bg-color'] 13 | } 14 | }); -------------------------------------------------------------------------------- /components/utils/raf.ts: -------------------------------------------------------------------------------- 1 | function requestAniFrame() { 2 | if (typeof global !== 'undefined') { 3 | return ( 4 | global.requestAnimationFrame || 5 | function (callback) { 6 | setTimeout(callback, 1000 / 60) 7 | } 8 | ) 9 | } 10 | return function (callback: Function) { 11 | setTimeout(callback, 1000 / 60) 12 | } 13 | } 14 | 15 | export default requestAniFrame() 16 | -------------------------------------------------------------------------------- /sites/components/title/title.scss: -------------------------------------------------------------------------------- 1 | .doc { 2 | &-title { 3 | &-position { 4 | &.fixed { 5 | .title { 6 | font-size: 24px; 7 | font-weight: bold; 8 | } 9 | } 10 | .title { 11 | font-size: 40px; 12 | font-weight: bold; 13 | } 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /components/utils/filter-border-style.ts: -------------------------------------------------------------------------------- 1 | export default (style) => { 2 | const keys = Object.keys(style); 3 | const filterKeys = keys.filter((key) => { 4 | return /^border/.test(key); 5 | }); 6 | 7 | const result = {}; 8 | for (let i = 0; i < filterKeys.length; i++) { 9 | const key = filterKeys[i]; 10 | result[key] = style[key]; 11 | } 12 | return result; 13 | }; 14 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | pre-commit: 2 | parallel: true 3 | commands: 4 | lint: 5 | files: git diff --name-only @{push} 6 | glob: "*.{js,ts,jsx,tsx}" 7 | run: npx eslint {files} 8 | types: 9 | files: git diff --name-only @{push} 10 | glob: "*.{js,ts, jsx, tsx}" 11 | run: npx tsc --noEmit 12 | commit-msg: 13 | parallel: true 14 | commands: 15 | commitlint: 16 | run: npx commitlint --edit 17 | -------------------------------------------------------------------------------- /components/utils/filter-width-height.ts: -------------------------------------------------------------------------------- 1 | export default (style = {}) => { 2 | const keys = Object.keys(style); 3 | 4 | const filterKeys = keys.filter((key) => { 5 | return /width/.test(key) || /height/.test(key); 6 | }); 7 | 8 | const result = {}; 9 | 10 | for (let i = 0; i < filterKeys.length; i++) { 11 | const key = filterKeys[i]; 12 | 13 | result[key] = style[key]; 14 | } 15 | 16 | return result; 17 | }; 18 | -------------------------------------------------------------------------------- /components/utils/pt.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Dimensions, 3 | Platform 4 | } from 'react-native'; 5 | let { width, height } = Dimensions.get('window'); 6 | 7 | if (Platform.OS === 'android') { 8 | if (width > height) { 9 | width = Dimensions.get('window').height; 10 | height = Dimensions.get('window').width; 11 | }; 12 | }; 13 | 14 | const pt = (num: number): number => (num * width) / (375 * 2); 15 | export default pt; 16 | -------------------------------------------------------------------------------- /sites/components/styles/animation/ease.scss: -------------------------------------------------------------------------------- 1 | @keyframes nutEaseIn { 2 | 0% { 3 | opacity: 0; 4 | transform: scale(0.9); 5 | } 6 | 100% { 7 | opacity: 1; 8 | transform: scale(1); 9 | } 10 | } 11 | 12 | @keyframes nutEaseOut { 13 | 0% { 14 | opacity: 1; 15 | transform: scale(1); 16 | } 17 | 100% { 18 | opacity: 0; 19 | transform: scale(0.9); 20 | } 21 | } 22 | 23 | @include make-animation(nutEase); 24 | -------------------------------------------------------------------------------- /vite/config.ts: -------------------------------------------------------------------------------- 1 | import { mergeConfig } from 'vite'; 2 | import baseConfig from './vite.base.config'; 3 | import devConfig from './vite.dev.config'; 4 | import prodConfig from './vite.prod.config'; 5 | 6 | interface Props { 7 | mode: any; 8 | } 9 | 10 | export default ({ mode }: Props) => { 11 | if (mode === 'development') { 12 | return mergeConfig(baseConfig, devConfig); 13 | } 14 | return mergeConfig(baseConfig, prodConfig); 15 | }; 16 | -------------------------------------------------------------------------------- /sites/components/styles/animation/zoom.scss: -------------------------------------------------------------------------------- 1 | @keyframes nutZoomIn { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.3, 0.3, 0.3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | @keyframes nutZoomOut { 13 | from { 14 | opacity: 1; 15 | } 16 | 17 | 50% { 18 | opacity: 0; 19 | transform: scale3d(0.3, 0.3, 0.3); 20 | } 21 | 22 | to { 23 | opacity: 0; 24 | } 25 | } 26 | @include make-animation(nutZoom); 27 | -------------------------------------------------------------------------------- /sites/components/styles/animation/drop.scss: -------------------------------------------------------------------------------- 1 | @keyframes nutDropIn { 2 | 0% { 3 | opacity: 0; 4 | transform: scaleY(0.8); 5 | } 6 | 100% { 7 | opacity: 1; 8 | transform: scaleY(1); 9 | } 10 | } 11 | 12 | @keyframes nutDropOut { 13 | 0% { 14 | opacity: 1; 15 | transform: scaleY(1); 16 | } 17 | 100% { 18 | opacity: 0; 19 | transform: scaleY(0.8); 20 | } 21 | } 22 | 23 | // select、dropdown 24 | @include make-animation(nutDrop); 25 | -------------------------------------------------------------------------------- /components/utils/filter-text-style.ts: -------------------------------------------------------------------------------- 1 | export default (style = {}) => { 2 | const keys = Object.keys(style); 3 | const filterKeys = keys.filter((key) => { 4 | return /^color/.test(key) || 5 | /^font/.test(key) || /textAlign/.test(key); 6 | }); 7 | 8 | const result = {}; 9 | for (let i = 0; i < filterKeys.length; i++) { 10 | const key = filterKeys[i]; 11 | result[key] = style[key]; 12 | } 13 | return result; 14 | }; 15 | -------------------------------------------------------------------------------- /components/timeselect/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import deviceWidth from '../utils/deviceWidth' 3 | 4 | export default (theme: any) => 5 | StyleSheet.create({ 6 | nut_timeselect_container: { 7 | backgroundColor:theme['$timeselect_bg_color'] 8 | }, 9 | nut_timeselect_title:{ 10 | width:deviceWidth, 11 | height:theme['$timeselect_title_height'], 12 | justifyContent:'center', 13 | alignItems:'center' 14 | } 15 | }); -------------------------------------------------------------------------------- /components/trendarrow/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => { 4 | return StyleSheet.create({ 5 | container: { 6 | flexDirection: 'row', 7 | alignItems: 'center' 8 | }, 9 | iconAfter: { 10 | marginLeft: theme['$trendarrow-before-icon-margin'] 11 | }, 12 | iconBefore: { 13 | marginRight: theme['$trendarrow-before-icon-margin'] 14 | }, 15 | text: { 16 | fontSize: theme['$trendarrow-font-size'] 17 | } 18 | }); 19 | }; 20 | -------------------------------------------------------------------------------- /components/utils/get-border-radius-value.ts: -------------------------------------------------------------------------------- 1 | import pt from './pt'; 2 | 3 | export default (value) => { 4 | if (typeof value === 'string') { 5 | if (value.includes('%')) { 6 | // 截取 7 | if (!Number.isNaN(value)) { 8 | const val = parseFloat(value); 9 | 10 | return (pt(750) * (val / 100)) / 2; 11 | } 12 | } 13 | 14 | const val = parseFloat(value); 15 | 16 | return (val / 2); 17 | } 18 | if (typeof value === 'number') { 19 | return value / 2; 20 | } 21 | 22 | return 0; 23 | }; 24 | -------------------------------------------------------------------------------- /sites/components/demo-preview/demo-preview.scss: -------------------------------------------------------------------------------- 1 | .doc { 2 | &-demo-preview { 3 | height: 667px; 4 | // height: 637px; 5 | width: 375px; 6 | position: absolute; 7 | right: 30px; 8 | top: 240px; 9 | // top: 135px; 10 | box-shadow: #ebedf0 0 4px 12px; 11 | border-radius: 12px; 12 | overflow: hidden; 13 | &.fixed { 14 | position: fixed; 15 | top: 120px; 16 | } 17 | iframe { 18 | // height: calc(100% - 40px); 19 | height: 100%; 20 | width: 100%; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sites/markdown-plugin/my-remark-plugin.ts: -------------------------------------------------------------------------------- 1 | import { visit } from 'unist-util-visit'; 2 | const myRemarkPlugin = () => { 3 | return (tree: any) => { 4 | visit(tree, (node) => { 5 | if (node.type === 'containerDirective') { 6 | if (node.name !== 'demo') return; 7 | 8 | const data = node.data || (node.data = {}); 9 | 10 | data.hName = 'div'; 11 | data.hProperties = { 12 | class: 'nutui-react--demo-wrapper', 13 | }; 14 | } 15 | }); 16 | }; 17 | }; 18 | 19 | export default myRemarkPlugin; 20 | -------------------------------------------------------------------------------- /sites/components/icon/demo.scss: -------------------------------------------------------------------------------- 1 | .nut-cell > .nutui-iconfont { 2 | margin-right: 10px; 3 | } 4 | .h5-ul { 5 | display: flex; 6 | flex-wrap: wrap; 7 | padding: 0; 8 | width: 100%; 9 | } 10 | .h5-ul .h5-li { 11 | flex: 0 0 25%; 12 | max-width: 25%; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | .h5-ul .h5-li .h5-span { 19 | height: 40px; 20 | font-size: 12px; 21 | text-align: center; 22 | } 23 | .h5-ul .h5-li .h5-span .nutui-iconfont { 24 | margin: 16px 0 16px; 25 | } 26 | -------------------------------------------------------------------------------- /sites/components/styles/mixins/text-ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin text-ellipsis() { 2 | white-space: nowrap; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | } 6 | // 单行超长省略号 7 | @mixin oneline-ellipsis($width: 100%) { 8 | width: $width; 9 | overflow: hidden; 10 | text-overflow: ellipsis; 11 | white-space: nowrap; 12 | } 13 | // 多行超长省略号 14 | @mixin moreline-ellipsis($line: 2, $width: 100%) { 15 | display: -webkit-box; 16 | -webkit-box-orient: vertical; 17 | -webkit-line-clamp: $line; 18 | overflow: hidden; 19 | word-break: break-all; 20 | } 21 | -------------------------------------------------------------------------------- /components/swipe/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => { 4 | return StyleSheet.create({ 5 | actions: { 6 | bottom: 0, 7 | left: 0, 8 | overflow: 'hidden', 9 | position: 'absolute', 10 | right: 0, 11 | top: 0, 12 | flex: 1, 13 | flexDirection: 'row', 14 | justifyContent: 'space-between' 15 | }, 16 | hidden: { 17 | bottom: 0, 18 | left: 0, 19 | overflow: 'hidden', 20 | position: 'absolute', 21 | right: 0, 22 | top: 0 23 | } 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /components/sidenavbaritem/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import pt from '../utils/pt'; 3 | 4 | const $nutSidenavbarItemHeight = pt(80); 5 | 6 | export default (theme: any) => 7 | StyleSheet.create({ 8 | nutsubsidenavbar__item: { 9 | height: $nutSidenavbarItemHeight, 10 | paddingVertical: pt(20), 11 | paddingLeft: pt(110), 12 | paddingRight: pt(16) 13 | }, 14 | nutsubsidenavbar__item__text: { 15 | color: theme.$gray2 16 | }, 17 | borderBt: { 18 | borderBottomWidth: pt(1), 19 | borderBottomColor: '#eeeff2' 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "rootDir": ".", 5 | "target": "ESNext", 6 | "useDefineForClassFields": true, 7 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 8 | "allowJs": false, 9 | "skipLibCheck": true, 10 | "esModuleInterop": false, 11 | "allowSyntheticDefaultImports": true, 12 | "strict": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "module": "ESNext", 15 | "moduleResolution": "Node", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "react-jsx" 19 | }, 20 | "include": ["vite/*.ts", "vite.config.ts"] 21 | } 22 | -------------------------------------------------------------------------------- /components/checkbox/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => { 4 | return StyleSheet.create({ 5 | container: { 6 | flexDirection: 'row', 7 | alignItems: 'center' 8 | }, 9 | text: { 10 | color: theme['$checkbox-label-color'], 11 | fontSize: theme['$checkbox-label-font-size'] 12 | }, 13 | textPositionleft: { 14 | marginRight: theme['$checkbox-label-margin-left'] 15 | }, 16 | textDisabledtrue: { 17 | opacity: 0.4 18 | }, 19 | iconright: { 20 | marginRight: theme['$checkbox-label-margin-left'] 21 | } 22 | }); 23 | }; 24 | -------------------------------------------------------------------------------- /components/utils/typings.ts: -------------------------------------------------------------------------------- 1 | import type { CSSProperties, ReactNode } from 'react' 2 | 3 | export interface IComponent { 4 | className?: string 5 | style?: CSSProperties 6 | iconFontClassName?: string 7 | iconClassPrefix?: string 8 | children?: ReactNode 9 | } 10 | 11 | export const ComponentDefaults = { 12 | // className: '', 13 | // style: {}, 14 | // children: undefined, 15 | iconClassPrefix: 'nut-icon', 16 | iconFontClassName: 'nutui-iconfont', 17 | } 18 | 19 | export interface BasicComponent { 20 | className?: string; 21 | style?: CSSProperties; 22 | iconFontClassName?: string; 23 | iconClassPrefix?: string; 24 | children?: ReactNode; 25 | } 26 | -------------------------------------------------------------------------------- /components/utils/filter-size-padding-container.ts: -------------------------------------------------------------------------------- 1 | export default (style = {}) => { 2 | const keys = Object.keys(style); 3 | 4 | const filterKeys = keys.filter((key) => { 5 | return /^padding/.test(key) || 6 | /^flex/.test(key) || /^position/.test(key) || 7 | /width/.test(key) || /height/.test(key) || 8 | /backgrondColor/.test(key) || 9 | /justifyContent/.test(key) || /alignItems/.test(key); 10 | }); 11 | 12 | const result = {}; 13 | for (let i = 0; i < filterKeys.length; i++) { 14 | const key = filterKeys[i]; 15 | result[key] = style[key]; 16 | } 17 | 18 | return result; 19 | }; 20 | -------------------------------------------------------------------------------- /components/utils/statusBarHeight.ts: -------------------------------------------------------------------------------- 1 | // 状态栏高度 2 | import { 3 | Platform, 4 | StatusBar, 5 | NativeModules 6 | } from 'react-native'; 7 | 8 | // 适配jdreact 9 | const JDReactNativeAdaptXModule = NativeModules.JDReactNativeAdaptXModule; 10 | 11 | let statusBarHeight = 0; 12 | 13 | if (Platform.OS === 'ios') { 14 | if (!!JDReactNativeAdaptXModule) { 15 | statusBarHeight = JDReactNativeAdaptXModule.statusBarHeight 16 | } 17 | 18 | if(!statusBarHeight) { 19 | statusBarHeight = 60 20 | } 21 | } else if (Platform.OS === 'android' && Platform.Version >= 19) { 22 | statusBarHeight = StatusBar.currentHeight; 23 | } 24 | 25 | export default statusBarHeight; 26 | -------------------------------------------------------------------------------- /components/utils/filter-size-margin-container.ts: -------------------------------------------------------------------------------- 1 | export default (style = {}) => { 2 | const keys = Object.keys(style); 3 | 4 | const filterKeys = keys.filter((key) => { 5 | return /^margin/.test(key) || 6 | /^flex/.test(key) || /^position/.test(key) || 7 | /width/.test(key) || /height/.test(key) || 8 | /backgrondColor/.test(key) || /^border/.test(key) || 9 | /justifyContent/.test(key) || /alignItems/.test(key); 10 | }); 11 | 12 | const result = {}; 13 | for (let i = 0; i < filterKeys.length; i++) { 14 | const key = filterKeys[i]; 15 | result[key] = style[key]; 16 | } 17 | 18 | return result; 19 | }; 20 | -------------------------------------------------------------------------------- /sites/components/styles/mixins/make-animation.scss: -------------------------------------------------------------------------------- 1 | @mixin make-animation( 2 | $keyframeName, 3 | $timingFun: $animation-timing-fun, 4 | $duration: $animation-duration 5 | ) { 6 | .#{$keyframeName}-enter-active, 7 | .#{$keyframeName}In, 8 | .#{$keyframeName}-leave-active, 9 | .#{$keyframeName}Out { 10 | animation-duration: $duration; 11 | animation-fill-mode: both; 12 | animation-timing-function: $timingFun; 13 | } 14 | 15 | .#{$keyframeName}-enter-active, 16 | .#{$keyframeName}In { 17 | animation-name: #{$keyframeName}In; 18 | } 19 | 20 | .#{$keyframeName}-leave-active, 21 | .#{$keyframeName}Out { 22 | animation-name: #{$keyframeName}Out; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /components/progress/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => 4 | StyleSheet.create({ 5 | containerOut: { 6 | flex:1, 7 | flexDirection:'row', 8 | alignItems:'center' 9 | }, 10 | containerInner:{ 11 | flex:1, 12 | flexDirection:'row', 13 | alignItems:'center' 14 | }, 15 | progressBg:{ 16 | flexDirection:'row', 17 | flex:1, 18 | marginRight:theme['$progress-bg-margin-right'] 19 | }, 20 | progreessTg:{ 21 | flex:1, 22 | borderRadius:theme['$progress-tg-border-radius'], 23 | paddingHorizontal:theme['$progress-tg-padding-horizontal'], 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /components/utils/filter-container-style-without-border.ts: -------------------------------------------------------------------------------- 1 | export default (style) => { 2 | const keys = Object.keys(style); 3 | const filterKeys = keys.filter((key) => { 4 | return /^padding/.test(key) || /^margin/.test(key) || 5 | /^flex/.test(key) || /^position/.test(key) || 6 | /width/.test(key) || /height/.test(key) || 7 | /backgrondColor/.test(key) || /justifyContent/.test(key) || 8 | /alignItems/.test(key); 9 | }); 10 | 11 | const results = {}; 12 | 13 | for (let i = 0; i < filterKeys.length; i++) { 14 | const key = filterKeys[i]; 15 | results[key] = style[key]; 16 | } 17 | return results; 18 | }; 19 | -------------------------------------------------------------------------------- /components/backtop/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export default (theme: any) => 4 | StyleSheet.create({ 5 | nut_backtop_container: { 6 | alignItems: 'center', 7 | justifyContent: 'center', 8 | width: theme['$backtop-width'], 9 | height: theme['$backtop-height'], 10 | borderRadius: theme['$backtop-radius'], 11 | borderWidth: 1, 12 | borderColor: theme['$backtop-border-color'], 13 | backgroundColor: theme['$backtop-bg-color'], 14 | }, 15 | nut_backtop_text: { 16 | fontSize: theme['$backtop-text-size'], 17 | color: theme['$backtop-text-color'], 18 | marginTop: theme['$backtop-text-maginTop'], 19 | }, 20 | }); 21 | -------------------------------------------------------------------------------- /components/utils/filter-container-style.ts: -------------------------------------------------------------------------------- 1 | export default (style = {}) => { 2 | const keys = Object.keys(style); 3 | 4 | const filterKeys = keys.filter((key) => { 5 | return /^padding/.test(key) || /^margin/.test(key) || 6 | /^flex/.test(key) || /^position/.test(key) || 7 | /width/.test(key) || /height/.test(key) || 8 | /backgrondColor/.test(key) || /^border/.test(key) || 9 | /justifyContent/.test(key) || /alignItems/.test(key); 10 | }); 11 | 12 | const result = {}; 13 | for (let i = 0; i < filterKeys.length; i++) { 14 | const key = filterKeys[i]; 15 | result[key] = style[key]; 16 | } 17 | 18 | return result; 19 | }; 20 | -------------------------------------------------------------------------------- /demo/components/Theme.tsx: -------------------------------------------------------------------------------- 1 | import { View, TouchableHighlight } from 'react-native'; 2 | 3 | import { Button, Icon, Dialog } from '@nutui/nutui-react-native'; 4 | 5 | const ThemePanel = (props: any) => { 6 | return Theme; 7 | }; 8 | 9 | const Theme = (props: any) => { 10 | const { current, onChange } = props; 11 | return ( 12 | 14 | Dialog.alert( 15 | '动态主题配置', 16 | 17 | ) 18 | } 19 | style={{ 20 | padding: 10 21 | }} 22 | > 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Theme; 29 | -------------------------------------------------------------------------------- /sites/assets/locales/README.md: -------------------------------------------------------------------------------- 1 | ### nutui 语言包 2 | 3 | 目前支持的语言: 4 | 5 | | 语言 | 文件名 | 版本 | 6 | |--------------|--------|-----------| 7 | | 英语 | en-US | `v3.1.19` | 8 | | 印度尼西亚语 | id-ID | 等待 PR | 9 | | 泰语 | th-TH | 等待 PR | 10 | | 简体中文 | zh-CN | `v3.1.19` | 11 | | 繁體中文 | zh-TW | `v3.1.19` | 12 | 13 | > 在 [这里](https://github.com/jdf2e/nutui/tree/next/src/vant/src/packages/locale/lang) 查看所有的语言包源文件。 14 | 15 | ## 常见问题 16 | 17 | ### 找不到所需的语言包？ 18 | 19 | 如果上方列表中没有你需要的语言，欢迎给我们提 Pull Request 来增加新的语言包。改动内容可以参考增加 [中文繁体](https://github.com/jdf2e/nutui/commit/d6275bf87387860e0757629f3553320359ec7434) 语言包 的 PR 20 | 21 | ### 业务代码如何实现国际化？ 22 | 23 | 可以使用 [vue-i18n](https://github.com/kazupon/vue-i18n) 来实现。 -------------------------------------------------------------------------------- /components/switch/button.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | TouchableHighlight, 5 | TouchableHighlightProps 6 | } from 'react-native'; 7 | 8 | interface ButtonProps extends TouchableHighlightProps { 9 | disabled: true | false; 10 | children: React.ReactNode; 11 | } 12 | 13 | export default ({ 14 | disabled = false, 15 | children, 16 | ...props 17 | }: ButtonProps) => { 18 | if (disabled) { 19 | return ( 20 | 21 | {children} 22 | 23 | ); 24 | } 25 | 26 | return ( 27 | 32 | {children} 33 | 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /components/utils/deviceHeight.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Dimensions, 3 | NativeModules, 4 | Platform 5 | } from 'react-native'; 6 | 7 | // 适配 jdreact 8 | const JDReactNativeSystemModule = NativeModules.JDReactNativeSystemModule; 9 | 10 | // 安卓上不准，ios是正常的 11 | let { height } = Dimensions.get('window'); 12 | 13 | if (Platform.OS === 'android' && JDReactNativeSystemModule && JDReactNativeSystemModule.getDimensions) { 14 | // 由于Dimensions依赖didUpdateDimensions事件来更新宽高，该事件为异步，导致屏幕尺寸变化后，一定概率无法在加载jsbundle前更新缓存宽高，所以改为native同步获取宽高 15 | let initDimens = JDReactNativeSystemModule.getDimensions(); 16 | if (initDimens) { 17 | Dimensions.set(initDimens) 18 | height = Dimensions.get('window').height; 19 | } 20 | } 21 | 22 | export default height; -------------------------------------------------------------------------------- /components/utils/deviceWidth.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Dimensions, 3 | NativeModules, 4 | Platform 5 | } from 'react-native'; 6 | 7 | // 适配 jdreact 8 | const JDReactNativeSystemModule = NativeModules.JDReactNativeSystemModule; 9 | 10 | // 安卓上不准，ios是正常的 11 | let { width } = Dimensions.get('window'); 12 | 13 | if (Platform.OS === 'android' && JDReactNativeSystemModule && JDReactNativeSystemModule.getDimensions) { 14 | // 由于Dimensions依赖didUpdateDimensions事件来更新宽高，该事件为异步，导致屏幕尺寸变化后，一定概率无法在加载jsbundle前更新缓存宽高，所以改为native同步获取宽高 15 | let initDimens = JDReactNativeSystemModule.getDimensions(); 16 | if (initDimens) { 17 | Dimensions.set(initDimens) 18 | width = Dimensions.get('window').width; 19 | } 20 | } 21 | 22 | export default width; 23 | -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = function (api) { 5 | api.cache(true); 6 | return { 7 | presets: ['babel-preset-expo'], 8 | plugins: [ 9 | '@babel/plugin-proposal-export-namespace-from', 10 | [ 11 | 'module-resolver', 12 | { 13 | extensions: ['.tsx', '.ts', '.js', '.json'], 14 | alias: { 15 | // For development, we want to alias the library to the source 16 | [pak.name]: path.join(__dirname, '..', pak.source), 17 | // 'expo-linear-gradient': path.join(__dirname, './node_modules', 'react-native-linear-gradient') 18 | }, 19 | }, 20 | ], 21 | ], 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /sites/config/env.ts: -------------------------------------------------------------------------------- 1 | type EnvConfig = { 2 | baseUrl: string; 3 | isPrd: boolean; 4 | locales: string[]; 5 | }; 6 | 7 | /** 8 | * 配置编译环境和线上环境之间的切换 9 | * 10 | * baseUrl: 域名地址 11 | * articleUrl: 文章地址 12 | */ 13 | 14 | const config: EnvConfig = { 15 | baseUrl: '', 16 | isPrd: true, // 是否为线上 17 | locales: ['zh-CN', 'zh-TW', 'en-US', 'th'], 18 | }; 19 | switch (import.meta.env.MODE) { 20 | case 'development': 21 | /* 22 | * 开发环境 => npm run dev 23 | */ 24 | config.isPrd = false; 25 | config.baseUrl = '/devServer'; 26 | break; 27 | case 'production': 28 | /* 29 | * 线上环境 => npm run build 30 | */ 31 | config.isPrd = true; 32 | config.baseUrl = 'https://nutui.jd.com'; 33 | break; 34 | } 35 | export default config; 36 | -------------------------------------------------------------------------------- /sites/components/demo-preview/demo-preview.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { useLocation } from 'react-router-dom'; 3 | 4 | import './demo-preview.scss'; 5 | 6 | const DemoPreview = (props: any) => { 7 | const location = useLocation(); 8 | const path = location.pathname.split('/'); 9 | const [URL, setURL] = useState(path[path.length - 1]); 10 | 11 | useEffect(() => { 12 | const path = location.pathname.split('/'); 13 | setURL(path[path.length - 1]); 14 | }, [location]); 15 | 16 | return ( 17 |
18 | 19 |
20 | ); 21 | }; 22 | 23 | export default DemoPreview; 24 | -------------------------------------------------------------------------------- /sites/assets/locale/index.ts: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import useLocale from './useLocale' 3 | import { BaseLang } from '../locales/base' 4 | 5 | type Keys = keyof BaseLang 6 | interface LanguagesPackage { 7 | [key: string]: { 8 | [k in Keys]?: string 9 | } & 10 | A 11 | } 12 | 13 | export const useTranslate = (languagesPackage: LanguagesPackage) => { 14 | const [locale] = useLocale() 15 | const [translated, setLanguagesPackage] = useState( 16 | languagesPackage[locale || 'zh-CN'] as any 17 | ) 18 | // useEffect(() => { 19 | // if (languagesPackage) { 20 | // // @ts-ignore 21 | // setLanguagesPackage(languagesPackage[locale || 'zh-CN'] || {}) 22 | // } 23 | // }, []) 24 | return [translated] 25 | } 26 | -------------------------------------------------------------------------------- /components/utils/use-client-rect.ts: -------------------------------------------------------------------------------- 1 | 2 | import { 3 | findNodeHandle, 4 | UIManager 5 | } from 'react-native'; 6 | 7 | // export const getRectByTaro = async(element: any) => { 8 | // const res = await element.getBoundingClientRect(); 9 | // return res; 10 | // }; 11 | 12 | const getRect = async(ref) => { 13 | const handle = findNodeHandle(ref) || -1; 14 | const res = await new Promise((resolve) => { 15 | UIManager.measure(handle, (x, y, width, height, pageX, pageY) => { 16 | resolve({ 17 | x, 18 | y, 19 | width, 20 | height, 21 | pageX, 22 | pageY 23 | }); 24 | }); 25 | }); 26 | 27 | return res; 28 | }; 29 | 30 | export default getRect; 31 | -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: Setup 2 | description: Setup Node.js and install dependencies 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - name: Setup Node.js 8 | uses: actions/setup-node@v3 9 | with: 10 | node-version-file: .nvmrc 11 | 12 | - name: Cache dependencies 13 | id: yarn-cache 14 | uses: actions/cache@v3 15 | with: 16 | path: | 17 | **/node_modules 18 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 19 | restore-keys: | 20 | ${{ runner.os }}-yarn- 21 | 22 | - name: Install dependencies 23 | if: steps.yarn-cache.outputs.cache-hit != 'true' 24 | run: | 25 | yarn install --cwd demo --frozen-lockfile 26 | yarn install --frozen-lockfile 27 | shell: bash 28 | -------------------------------------------------------------------------------- /components/hooks/useLocale.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | export const getLocale = () => { 4 | let locale = 'zh-CN'; 5 | // const matched = window.parent.location.href.match(/#\/([a-z-]+)/i); 6 | // if (matched) { 7 | // [, locale] = matched; 8 | // } 9 | return locale; 10 | }; 11 | 12 | const useLocale = (): [string, any] => { 13 | const [locale, setLocale] = useState(getLocale()); 14 | const handlePopState = () => { 15 | setLocale(getLocale()); 16 | }; 17 | // useEffect(() => { 18 | // window.parent.addEventListener('popstate', handlePopState); 19 | // return () => { 20 | // window.parent.removeEventListener('popstate', handlePopState); 21 | // }; 22 | // }, []); 23 | return [locale, setLocale]; 24 | }; 25 | 26 | export default useLocale; 27 | -------------------------------------------------------------------------------- /components/hooks/useTranslate.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { BaseLang } from "../configprovider/locales/types"; 3 | import useLocale from "./useLocale"; 4 | 5 | type Keys = keyof BaseLang; 6 | interface LanguagesPackage { 7 | [key: string]: { 8 | [k in Keys]?: string; 9 | } & A; 10 | } 11 | 12 | const useTranslate = (languagesPackage: LanguagesPackage) => { 13 | const [locale] = useLocale(); 14 | const [translated, setLanguagesPackage] = useState( 15 | languagesPackage[locale || 'zh-CN'] as any 16 | ); 17 | // useEffect(() => { 18 | // if (languagesPackage) { 19 | // // @ts-ignore 20 | // setLanguagesPackage(languagesPackage[locale || 'zh-CN'] || {}) 21 | // } 22 | // }, []) 23 | return [translated]; 24 | }; 25 | export default useTranslate; 26 | -------------------------------------------------------------------------------- /vite/vite.dev.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import atImport from 'postcss-import'; 3 | import path from 'path'; 4 | 5 | export default defineConfig({ 6 | server: { 7 | port: 3000, 8 | cors: true, 9 | }, 10 | css: { 11 | preprocessorOptions: { 12 | scss: { 13 | // example : additionalData: `@import "./src/design/styles/variables";` 14 | // dont need include file extend .scss 15 | // additionalData: `@import "@/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`, 16 | additionalData: `@import "@/sites/assets/styles/nutui.scss";@import "@/sites/assets/styles/variables.scss";`, 17 | }, 18 | postcss: { 19 | plugins: [atImport({ path: path.join(__dirname, '..', 'sites') })], 20 | }, 21 | }, 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /components/configprovider/commutiy/doc.md: -------------------------------------------------------------------------------- 1 | # ConfigProvider 全局配置 2 | 3 | ### 介绍 4 | 5 | 用于全局配置 NutUI-React 组件，提供国际化支持。 6 | 7 | ### 安装 8 | 9 | ```tsx 10 | import { ConfigProvider } from '@nutui/nutui-react-native'; 11 | ``` 12 | 13 | ## 代码演示 14 | 15 | ### 基础用法 16 | 17 | :::demo 18 | 19 | ```tsx 20 | import React from 'react'; 21 | import { ConfigProvider } from "@nutui/nutui-react-native"; 22 | import en from "@nutui/nutui-react/dist/locales/en-US"; 23 | 24 | const App = () => { 25 | return ( 26 | 27 |