Skip to content

Instantly share code, notes, and snippets.

View chain.jsx
import React, { Component } from 'react';
class TCell extends Component {
render() {
return (
<td className={style.Tcell} style={style}>
<this.props.FormField name={name}
/>
</td>
);
}
View keys.js
let data = [{
location: '31231231-1231-3123-13-1233',
item: '31-31-3123-1-3-13-1-3-1-3-4',
active: true,
modifier: "3213123-312312-31-23-1"
}]
// as an object
let data = {
'31231231-1231-3123-13-1233': {
'31-31-3123-1-3-13-1-3-1-3-4': {
View Data Bridge.jsx
export class ListPlus extends Component {
getData() {
// Connect Your Apps and Stores here
// requesting data
// applying data filter
// filter from front end store
}
render() {
const {list} = this.props;
const data= this.getData()
View input selector.jsx
import * from './inputs'
class FormField extends Component {
shouldComponentUpdate(nextProps, nextState) {
// dependancy code for performance
}
render() {
const MainComponent = get(inputs, type, label);
return <>
<Label />
<FieldComponent {...this.props}>
View input.jsx
import React, { Component } from 'react'
import { Input } from 'antd'
class text extends Component {
change = (ev) => {
const { field} = this.props
field.onChange({ target: { name: field.name, value: ev.target.value } });
// extra code after saving
}
render() {
const { field={}, placeholder, field_type='text'} = this.props
View validations.js
import * as Validations from 'validation Module'
validationUpdate = ()=>{
// select validation function by key
this.validations = map(this.props.validates, (d, key) => (get(Validations, key, false)(d))).filter(Boolean)
}
validation = (value) => {
// try to validate one by one
const valid = this.validations.reduce((res, fun) => (res || fun(value, {parentValues})), undefined)
return valid;
}
View form vals.jsx
import React from 'react'
import {useFormikContext} from 'formik'
import {pick} from 'lodash';
export default (data)=>{
return function FormVals(MainComponent) {
const FormComp = (props) => {
const mainProps = pick(useFormikContext(), data.pick || ['values']);
return <MainComponent {...{...props, ...mainProps}} />
};
return FormComp
View connect component.jsx
export default function LayoutMain(WrappedComponent) {
class FormComponent extends Component {
renderControls() {
return <p>hi</p>
}
render() {
return (
<WrappedComponent
{...this.props}
renderControls={this.renderControls}
View Auth Component.jsx
export default class Authorized extends Component {
handleClick = () => {
const { onClick } = this.props
const authorized = checkAuthorization()
if (authorized) {
// console.log('authorixes')
onClick(d)
}
// show Not Authorize Popup
}
View object vs array.js
import {get, find} from lodash;
let object_data = {
"cat1": {
"video1": {
"active": true
}
}
}
let arrD = [{
"cat": "cat1",