mobx-react#Observer JavaScript Examples

The following examples show how to use mobx-react#Observer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AppLoader.js    From apps-ng with Apache License 2.0 6 votes vote down vote up 
AppWrapper = observer(({ children }) => {
  const { settings } = useStore()

  useEffect(() => {
    if (settings.apiUrl) { return }

    const timeout = setTimeout(() => {
      settings.applyValues({
        apiUrl: defaultApiUrl
      })
    }, 100)

    // todo: re-create keyring

    return () => clearTimeout(timeout)
  }, [settings.apiUrl])

  return <Queue>
    {!!settings.apiUrl && (
      <Api 
        url={settings.apiUrl}
        initialTypesChain={typesChain}
      >
        <BlockAuthors>
          <Events>
            <Signer />
            {children}
          </Events>
        </BlockAuthors>
      </Api>
    )}
  </Queue>
})
Example #2
Source File: BarCharts.js    From gedge-platform with Apache License 2.0 6 votes vote down vote up 
BarCharts = observer(() => {
  return (
    <div>
      <BarChart width={730} height={250} data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" fill="#8884d8" />
        <Bar dataKey="uv" fill="#82ca9d" />
      </BarChart>
    </div>
  );
})
Example #3
Source File: FieldsButton.js    From dm2 with Apache License 2.0 6 votes vote down vote up 
FieldsButton.Checkbox = observer(({ column, children }) => {
  return (
    <Checkbox
      size="small"
      checked={!column.hidden}
      onChange={column.toggleVisibility}
      style={{ width: "100%", height: "100%" }}
    >
      {children}
    </Checkbox>
  );
});
Example #4
Source File: DynamicPreannotationsControl.js    From label-studio-frontend with Apache License 2.0 6 votes vote down vote up 
DynamicPreannotationsControl = inject("store")(observer(({ store }) => {
  return store.autoAnnotation && !store.forceAutoAcceptSuggestions ? (
    <Block name="dynamic-preannotations-control">
      <Input
        type="checkbox"
        checked={store.autoAcceptSuggestions}
        label="Auto accept annotation suggestions"
        onChange={(e) => store.setAutoAcceptSuggestions(e.target.checked)}
        waiting={store.awaitingSuggestions}
        labelProps={{
          placement: 'right',
        }}
      />
    </Block>
  ) : null;
}))
Example #5
Source File: TransactionDetailScreen.js    From RRWallet with MIT License 6 votes vote down vote up 
render() {
    return (
      <View style={alStyles.main}>
        <Text style={alStyles.title}>{this.title}</Text>
        <View style={alStyles.separator} />
        <Observer>
          {() => this.data.map((item, index) => <AddressCell key={index + ""} data={item} hud={this.hud} />)}
        </Observer>
        {this.showExpand && [
          <View key="1" style={alStyles.separator} />,
          <Button
            key="2"
            containerStyle={alStyles.buttonContainer}
            title={this.expandText}
            titleStyle={alStyles.expand}
            onPress={this.onExpandPress}
          />,
        ]}
      </View>
    );
  }
Example #6
Source File: extensions.js    From lens-extension-cc with MIT License 5 votes vote down vote up 
Select = observer(_Select)
Example #7
Source File: PushCommandButton.js    From apps-ng with Apache License 2.0 5 votes vote down vote up 
TxModal = observer(({
  contractId, payload, onSuccessMsg, modalTitle, modalSubtitle,
  onSuccessCallback, onFailedCallback,
  setVisible, bindings
}) => {
  const { account, appRuntime } = useStore()
  const { ecdhChannel } = appRuntime
  const [isBusy, setIsBusy] = useState(false)
  const [, setToast] = useToasts()
  const [command, setCommand] = useState('')
  const [disabled, setDisabled] = useState(false)

  const { t } = useTranslation()

  useEffect(() => {
    if (!appRuntime?.channelReady) return
    setDisabled(true)
    ;(async () => {
      const cipher = await encryptObj(ecdhChannel, payload)
      const apiCipher = toApi(cipher)
      setCommand(JSON.stringify({ Cipher: apiCipher }))
      setDisabled(false)
    })()
  }, [payload, appRuntime?.channelReady])

  const onStart = useCallback(() => {
    setIsBusy(true)
  }, [setIsBusy])

  const onFailed = useCallback(e => {
    setIsBusy(false)
    e && console.warn(e)
    setToast({
      text: t('Failed to submit.'),
      type: 'error'
    })
    if (onFailedCallback) onFailedCallback(e)
  }, [t, setIsBusy])

  const onSuccess = useCallback(() => {
    setToast({
      text: onSuccessMsg
    })
    onClose()
    if (onSuccessCallback) onSuccessCallback()
  }, [t, onClose])

  const onClose = useCallback(() => {
    if (isBusy) { return }

    setVisible(false)
  }, [isBusy])

  const doSend = useCallback(() => {
    if (isBusy) { return }
  }, [isBusy])

  return <Modal {...bindings} disableBackdropClick>
    <Modal.Title>{modalTitle}</Modal.Title>
    <Modal.Subtitle>{modalSubtitle}</Modal.Subtitle>
    <Spacer y={1} />
    <TxButton
      accountId={account.address || ''}
      onClick={doSend}
      params={[contractId, command]}
      tx='phala.pushCommand'
      withSpinner
      onStart={onStart}
      onFailed={onFailed}
      onSuccess={onSuccess}
      disabled={disabled}
    >
      {t('Submit')}
    </TxButton>
    <Modal.Action onClick={onClose}>{t('Cancel')}</Modal.Action>
  </Modal>
})
Example #8
Source File: AddressScreen.js    From RRWallet with MIT License 5 votes vote down vote up 
constructor(props) {
    super(props);
    this.props.navigator.addOnNavigatorEvent(this.onNavigatorEvent.bind(this));
    this.observer();
  }
Example #9
Source File: DetailMeta.js    From gedge-platform with Apache License 2.0 5 votes vote down vote up 
DetailMeta = observer((props) => {
    const { data } = props
    let labelTable = [];
    let AnnotationTable = [];
    let labels = data.labels
    let annotations = data.annotations

    Object.entries(labels).forEach(([keys, values]) => {
        labelTable.push(
            // <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>
            <tr>
                <th>{keys} </th>
                <td>{values}</td>
            </tr>
        )
    });
    Object.entries(annotations).forEach(([keys, values]) => {
        AnnotationTable.push(
            // <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>
            <tr>
                <th>{keys} </th>
                <td>{values}</td>
            </tr>
        )
    });

    // let annotationsTable = [];
    // Object.entries(annotations).forEach(([keys, values]) => {
    //     annotationsTable.push(

    //         <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

    //     )
    // });

    useEffect(() => {
        return () => {
        };
    }, []);

    return (
        <React.Fragment>
            <hr />
            <h4 className="card-title">라벨</h4>
            <hr />
            <div className="table-responsive mb-0" data-pattern="priority-columns">
                <Table id="tech-companies-1" striped bordered responsive>
                    <thead>
                        <tr>
                            <th data-priority="1">Key</th>
                            <th data-priority="3">Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        {labelTable}
                    </tbody>
                </Table>
            </div>
            <hr />
            <h4 className="card-title">어노테이션</h4>
            <hr />
            <div className="table-responsive mb-0" data-pattern="priority-columns">
                <Table id="tech-companies-1" striped bordered responsive>
                    <thead>
                        <tr>
                            <th data-priority="1">Key</th>
                            <th data-priority="3">Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        {AnnotationTable}
                    </tbody>
                </Table>
            </div>



        </React.Fragment >
    )
})
Example #10
Source File: App.js    From dm2 with Apache License 2.0 5 votes vote down vote up 
App = observer(AppComponent)