react-component / m-picker Goto Github PK
View Code? Open in Web Editor NEWReact Mobile Picker(web & react-native)
Home Page: http://react-component.github.io/m-picker/
React Mobile Picker(web & react-native)
Home Page: http://react-component.github.io/m-picker/
期望效果是,不仅能支持滑动选择,还能支持点击选择,不然每次都要滑动,太麻烦了
For the online example of the picker.popup - http://react-component.github.io/m-picker/examples/popup.html
It is not showing any items. Here is screenshot for me:
{'open'}
源码貌似把点击方法绑定到button上了
import * as React from 'react'
import { TextInput, View, Text } from 'react-native'
// import RMCMultiPicker from 'rmc-picker/lib/MultiPicker'
// import RMCPicker from 'rmc-picker/lib/Picker'
import Picker from 'rmc-picker/lib/NativePicker'
// import { Toast } from 'antd-mobile'
// const Item = RMCPicker.Item
// const { Item } = RMCPicker
export default class DropPicker extends React.Component<any, any> {
state = {
value: [],
}
render() {
let value = 1
let data = [1, 2, 3, 4]
return (
<View style={{ flex: 1 }}>
{data.map(item => (
<Picker.Item key={'item'} value={'item'} label={'fdfdf'}>
{item}
</Picker.Item>
))}
{/* <RMCPicker.Item value="2">two</RMCPicker.Item>
<RMCPicker.Item value="3">three</RMCPicker.Item>
<RMCPicker.Item value="4">four</RMCPicker.Item>
<RMCPicker.Item value="5">five</RMCPicker.Item>
<RMCPicker.Item value="6">six</RMCPicker.Item>
<RMCPicker.Item value="7">seven</RMCPicker.Item>
<RMCPicker.Item value="8">eight</RMCPicker.Item> */}
)
}
}
Hi there,
I am working on a react native project. I was using the Picker component - https://facebook.github.io/react-native/docs/picker.html - however I hit the limit of not being able to style the dividing borders and the alignment of the text in the (I was hoping for left alignment). Is this possible with your component?
zscroller 已经成为影响“体积”和“复杂度”的最后一个大因素,被 Picker / ListView / Calendar 三个组件用到,分别都导致了一定的代码冗余、理解复杂度等问题。
以 Picker 为例、对比社区其他 UI 库做法:
原生实现的 framework7 picker https://github.com/framework7io/Framework7/blob/9f3589b2a2dc9d2119d41887a31309c8e811ec27/src/js/framework7/picker.js
基于 angular 的 ionic picker https://github.com/ionic-team/ionic/blob/1573043f4e31cabe1bed6bb0f4b171a8575d360d/src/components/picker/picker-column.ts
基于 zepto 的 weui picker https://github.com/Tencent/weui.js/blob/81deb5c1c3da3e7d4d5d124d4c5da100171b8408/src/picker/picker.js
基于 react 的 weui picker https://github.com/weui/react-weui/blob/f8b12cd6f383b3e07c64442623839376384e33d0/src/components/picker/picker.js
基于 vue 的 饿了么 picker https://github.com/ElemeFE/mint-ui/blob/28abcb96cd6f85fae0863b36ef8a24cacf7f721e/packages/picker/src/picker.vue
这三个压缩后体积都在 10k 左右,并且源码比较清晰无复杂依赖,没有多余代码。
发现一个和我们一样使用 zscroller 的 picker https://github.com/airyland/vux/blob/e3f46841a544984d1d93a8e3bcf86a03b7f38f3b/src/components/picker/scroller.js 也精简了不少代码。
我们目前的问题主要出在 zscroller 上、导致体积是他们的 2 倍多大小,zscroller 的 zoom / enableScrollX / paging / PullToRefresh 这些 增加代码行数、又增加复杂度,对组件来说也是多余代码。
web ok
怎么不把 scroller 拆分出来?现在杂糅到一起看着维护成本略高,以及兼容性成本。
复现代码
function App() {
const [value, setValue] = useState([]);
const onChange = value => {
console.log(value);
setValue(value);
};
return (
<div className="App">
<MultiPicker selectedValue={value} onValueChange={onChange}>
<Picker indicatorClassName="my-picker-indicator">
<Picker.Item className="my-picker-view-item" value="1">
one
</Picker.Item>
</Picker>
</MultiPicker>
</div>
);
}
期待效果
初始化时触发onValueChange事件
ref ant-design/ant-design-mobile#1841
The user can change the value of the Picker/ PickerView/ DatePicker by clicking the value and scroll to that value besides scrolling the picker.
<Picker onPickerClick={(value) => console.log(value) />
onPickerClick will return the value that is clicked.
preact对于children处理较弱,某些情况会在children为[]
时转换为undefined
,导致undefined.map
和 for循环 等代码报错。
语言版本是默认英文吗?没有修改语言的方法吗?
In the example, there is a button inside the popup component, when button is clicked, popup shows.
How can the popup be opened by event other than the click of a button?
{/* if component props will be changed like below. */}
<Picker
defaultSelectedValue={0}
selectedValue={someAwaitingValue /* it is undefined yet. */}
>
{items}
</Picker>
{/* vvvvvvvvvv */}
<Picker
defaultSelectedValue={1}
selectedValue={someAwaitingValue /* it is undefined yet. */}
>
{items}
</Picker>
The condition for updating this.state.selectedValue
is currently 'selectedValue' in nextProps
.
This causes select
method will update the selectedValue
to be the first value of Picker.Item
.
I've passed property disabled=true to Picker but nothing changed.
Line 57 in ade16b7
If not set selectedValue, is no has event fire when reselect the first item.
core code:
MultiPicker.tsx:
const selectedValue = this.getValue();
const colElements = React.Children.map(children, (col: any, i) => {
return React.cloneElement(col, {
selectedValue: selectedValue[i],
onValueChange: (...args) => this.onValueChange(i, ...args),
});
});
the getValue
implement in MultiPickerMixin.tsx:
getValue() {
const { children, selectedValue } = this.props;
if (selectedValue && selectedValue.length) {
return selectedValue;
} else {
if (!children) {
return [];
}
return React.Children.map(children, (c: any) => {
const cc: any = React.Children.toArray(c.props.children);
return cc && cc[0] && cc[0].props.value;
});
}
},
If not set selectedValue, the result of getValue()
alway equel the first item's value
of picker's children of multipicker.
在 react-native
环境下
import Picker from 'rmc-picker'
console.log(Picker.Item); // undefined
导致示例报错,求解
controlled open prop
<Picker open={true/false}>
但是offsetHeight只能精确到个位,导致content的transform计算出现误差,请问有没有什么解决方法?
3.8.7引入后lib文件夹里有index.web.js!但是3.9.1 lib文件夹中没有index.js
导致不兼容问题
例如values是[0,1],selectValue是-1,会触发onChange事件。
非用户选择,应该不要触发onChange事件
import { MultiPicker, Picker} from 'rmc-picker';
---
<div style={{ background: '#f5f5f9', padding: 10 }}>
<MultiPicker
selectedValue={this.state.value}
onValueChange={this.onChange}
onScrollChange={this.onScrollChange}
>
<Picker indicatorClassName="my-picker-indicator">
<Picker.Item className="my-picker-view-item" value="1">one</Picker.Item>
<Picker.Item className="my-picker-view-item" value="2">two</Picker.Item>
<Picker.Item className="my-picker-view-item" value="3">three</Picker.Item>
<Picker.Item className="my-picker-view-item" value="4">four</Picker.Item>
<Picker.Item className="my-picker-view-item" value="5">five</Picker.Item>
<Picker.Item className="my-picker-view-item" value="6">six</Picker.Item>
<Picker.Item className="my-picker-view-item" value="7">seven</Picker.Item>
<Picker.Item className="my-picker-view-item" value="8">eight</Picker.Item>
</Picker>
<Picker indicatorClassName="my-picker-indicator">
<Picker.Item className="my-picker-view-item" value="11">eleven</Picker.Item>
<Picker.Item className="my-picker-view-item" value="12">twelve</Picker.Item>
<Picker.Item className="my-picker-view-item" value="13">thirteen</Picker.Item>
<Picker.Item className="my-picker-view-item" value="14">fourteen</Picker.Item>
<Picker.Item className="my-picker-view-item" value="15">fifteen</Picker.Item>
<Picker.Item className="my-picker-view-item" value="16">sixteen</Picker.Item>
<Picker.Item className="my-picker-view-item" value="17">seventeen</Picker.Item>
<Picker.Item className="my-picker-view-item" value="18">eighteen</Picker.Item>
</Picker>
</MultiPicker>
</div>
app.bundle.js:189551 Uncaught TypeError: Cannot read property 'Item' of undefined
at Object.<anonymous> (app.bundle.js:189551)
at __webpack_require__ (app.bundle.js:1299)
at fn (app.bundle.js:722)
at Object.<anonymous> (app.bundle.js:181898)
at __webpack_require__ (app.bundle.js:1299)
at fn (app.bundle.js:722)
at Object.<anonymous> (app.bundle.js:75501)
at __webpack_require__ (app.bundle.js:1299)
at fn (app.bundle.js:722)
at Object.<anonymous> (app.bundle.js:283796)
MultiPicker doesn't seem to work on RN 0.42. It breaks on the example provided.
Console.log provided below.
Expected a component class, got [object Object].handleException @ ExceptionsManager.js:63handleError @ InitializeCore.js:114reportFatalError @ error-guard.js:44guard @ MessageQueue.js:48callFunctionReturnFlushedQueue @ MessageQueue.js:107message @ index.js:73 ExceptionsManager.js:71 Warning: Exception thrown by hook while handling onSetChildren: Invariant Violation: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren(). Invariant Violation: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren(). at invariant (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:2210:7) at Object.onSetChildren (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:4623:58) at callHook (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8194:4) at emitEvent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8211:1) at Object.onSetChildren (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8498:1) at Constructor.setChildrenForInstrumentation (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18282:32) at Constructor._updateChildren (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18538:31) at Constructor.updateChildren (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:18454:6) at Constructor.receiveComponent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:15284:6) at Object.receiveComponent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:17561:18)reactConsoleErrorHandler @ ExceptionsManager.js:71console.error @ YellowBox.js:61printWarning @ warning.js:36warning @ warning.js:60callHook @ ReactDebugTool.js:72emitEvent @ ReactDebugTool.js:87onSetChildren @ ReactDebugTool.js:374setChildrenForInstrumentation @ ReactMultiChild.js:159_updateChildren @ ReactMultiChild.js:415updateChildren @ ReactMultiChild.js:331receiveComponent @ ReactNativeBaseComponent.js:130receiveComponent @ ReactReconciler.js:163_updateRenderedComponent @ ReactCompositeComponent.js:981_performComponentUpdate @ ReactCompositeComponent.js:944updateComponent @ ReactCompositeComponent.js:846receiveComponent @ ReactCompositeComponent.js:709receiveComponent @ ReactReconciler.js:163_updateRenderedComponent @ ReactCompositeComponent.js:981_performComponentUpdate @ ReactCompositeComponent.js:944updateComponent @ ReactCompositeComponent.js:846performUpdateIfNecessary @ ReactCompositeComponent.js:734performUpdateIfNecessary @ ReactReconciler.js:213runBatchedUpdates @ ReactUpdates.js:170perform @ Transaction.js:149perform @ Transaction.js:149perform @ ReactUpdates.js:95flushBatchedUpdates @ ReactUpdates.js:199closeAll @ Transaction.js:222perform @ Transaction.js:163batchedUpdates @ ReactDefaultBatchingStrategy.js:65enqueueUpdate @ ReactUpdates.js:227enqueueUpdate @ ReactUpdateQueue.js:23enqueueSetState @ ReactUpdateQueue.js:247ReactComponent.setState @ ReactComponent.js:63(anonymous function) @ tab-bar-item-ios.js:30tryCallOne @ core.js:37(anonymous function) @ core.js:123(anonymous function) @ JSTimers.js:100callTimer @ JSTimersExecution.js:95callImmediatesPass @ JSTimersExecution.js:199callImmediates @ JSTimersExecution.js:214(anonymous function) @ MessageQueue.js:214guard @ MessageQueue.js:46__callImmediates @ MessageQueue.js:214(anonymous function) @ MessageQueue.js:128guard @ MessageQueue.js:46invokeCallbackAndReturnFlushedQueue @ MessageQueue.js:126message @ index.js:73 ExceptionsManager.js:71 Unhandled JS Exception: Expected a component class, got [object Object].reactConsoleErrorHandler @ ExceptionsManager.js:71console.error @ YellowBox.js:61logIfNoNativeHook @ RCTLog.js:38__callFunction @ MessageQueue.js:236(anonymous function) @ MessageQueue.js:108guard @ MessageQueue.js:46callFunctionReturnFlushedQueue @ MessageQueue.js:107message @ index.js:73
popup content 属性能传dom 吗
mask: fade
picker: slide
PopupMixin.tsx line:116
Popup和Picker结合使用时,.getValue()报错,picker对象中没有此方法?
import Picker from 'rmc-picker/lib/Picker'
import PopPicker from "rmc-picker/lib/Popup";
...
const items = ["1", "2", "3", "4", "5" ,"6" ,"7"];
const popupContent = (
<Picker
>
{
items.map((item) => {
return <Picker.Item value={item} key={generateUUID()}>
{item}
</Picker.Item>
})
}
</Picker>
);
const picker = (
<PopPicker
transitionName="rmc-picker-popup-slide-fade"
maskTransitionName="rmc-picker-popup-fade"
picker={popupContent}
okText="OK"
dismissText="取消"
title="选择"
value={value}
pickerValueChangeProp="onValueChange"
pickerValueProp="selectedValue"
onOk={this.handleSelectChange}
>
<div >
<div >
<span>{value}</span>
<span>
<Icon type="down" theme="outlined" />
</span>
</div>
</div>
</PopPicker>
);
...
请问能修改每次移动的距离吗?能覆盖样式,但是移动距离改变不了
引入 Picker.Item 方式之后每行的文本为空,可能和 react 和 preact 的 props.children 的机制不一致有关系。
Lines 7 to 9 in ddc4237
这有个bug,直接用props的visible参数返回null,会让dom节点直接消失。导致消失动画无效(因为节点直接消失了,动画还没来得及执行)。antd-mobile用了这个库,也有这个问题
Typescript definition file conflicts.
Platform: React Native
Scripting: Typescript
import Picker, { Popup } from "rmc-picker";
// TSC Compile Error.
[ts] Module '"/doeworks/src/mobile/node_modules/rmc-picker/lib"' has no exported member 'Popup'. [2305]
如下代码,主要是想在map的地方增加dangerouslySetInnerHTML
const map = (item: any) => {
const { className = '', style, value } = item.props;
return (
<div
style={{ ...itemStyle, ...style }}
className={`${selectedValue === value ? selectedItemClassName : itemClassName} ${className}`}
key={value}
dangerouslySetInnerHTML={{__html: item.children || item.props.children }}
>
</div>
);
};
ios原生picker点击未选中的item会立刻选中,android暂时没有这个feature,
尝试了给item添加onPress触发firValueChange,希望等#49若能merge之后pr
RN 的 PickerItem 有 color 属性,希望能用来表现某些 item 的 invalid 状态
Is there a possibility to add some props to change style of the selected item?
https://github.com/react-component/m-picker/blob/master/src/PopupMixin.tsx
:142
应该要触发上从props传入的hide事件吧
如题:能否把 styles 属性暴露出来?支持自定义样式。。。
考虑是否支持,来自 ant-design/ant-design-mobile#610
Hi!
Is there a way to select the value on click on each item? I'm not familiar with ZScroller, but it seems like it eats all the click event for the items
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.