if I disable --tw-ring-shadow it works ok
you can see in image !! show image !!
TimePicker Code
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<TimePicker
renderInput={(params) => <TextField {...params}/>}
value={value}
label="min/max time"
onChange={(newValue) => {
setValue(newValue);
}}
minTime={new Date(0, 0, 0, 8)}
maxTime={new Date(0, 0, 0, 18, 45)}
/>
</Stack>
</LocalizationProvider>
Related
I want to design a stack bar chart with an inner edge curve, I am using Rechart library.
This is my code for that:
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 20,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="10" vertical={false} />
<XAxis dataKey="name" axisLine={false} tick={CustomizedXAxisTick} />
<YAxis axisLine={false} tick={CustomizedYAxisTick} />
<Tooltip
cursor={false}
wrapperStyle={{ outline: "none" }}
position={{
x: position?.data.x ?? 0,
y: position?.data.y ?? 0
}}
content={<CustomTooltip />}
/>
<Bar dataKey="Company" stackId="a" fill="#49ABA8" radius={[0, 0, 10, 10]} />
<Bar dataKey="Employee" stackId="a" fill="#296E6B" radius={[10, 10, 0, 0]}
onMouseMove={(data) => setPosition({ data: data, show: true })}
onMouseLeave={(data) =>
setPosition({ data: data, show: false })
}
/>
</BarChart>
</ResponsiveContainer>
I did not get the expected output
Output:
Expected output :
Expected output:
I am using yup schema object for field validation in react.
so anyone know how to add color to error message or any other way to add color to requird message
below is the code -
const ValidationSchema = yup.object({name: yup
.string('Enter your name'),
age:yup
.number('Enter your name'),
.required('number required')
})
This is how the form is being used -
const formik = useFormik({
initialValues: {
name: '',
customerId:'',
email:'',
phoneNumber:'',
age: '',
gender: '',
race: '',
state_code: '',
county_code: '',
},
validationSchema: validationSchema,
onSubmit: async (values) => {
let diseases = Object.keys(selectValue).filter((keyName) => selectValue[keyName] === true && keyName)
console.log(responseAPI)
},
});
<form onSubmit={formik.handleSubmit}>
<Grid container rowSpacing={2} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ marginBottom: '2em' }}>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField
onChange={formik.handleChange} value={formik.values.name} id="name" type="string" name="name"
placeholder="Name"
/>
</Grid>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField placeholder="Phone Number"
onChange={formik.handleChange} value={formik.values.phoneNumber} id="phoneNumber" type="number" name="phoneNumber"
/>
</Grid>
</Grid>
<AddCustomerDetails data={values} selectValue={selectValue} setSelectValue={setSelectValue} diseases={diseases} formik={formik} setDiseases={setDiseases}
description={description} setDescription={setDescription}
/>
</form>
so I want number required message color to be red its now black in color.
I'm trying to change the borderColor on this Select Component from Native base.
Here is an image of the default color and the focused color:
The border is black by default. I already tried with borderColor="" and none/unset but it isn't changing the color.
How can I change the default and active border color?
The code is here..
useState,
} from 'react';
import {
Box,
Select,
CheckIcon,
} from 'native-base';
function Dropdown({
options = [],
placeholder,
backgroundColor,
className,
onChange = () => {},
}) {
const [value, setValue] = useState('');
return (
<Box>
<Box width="3/4" maxWidth="300">
<Select
className={className}
onChange={onChange}
minWidth="200"
selectedValue={value}
accessibilityLabel="Choose Service"
placeholder={placeholder}
backgroundColor={backgroundColor}
_selectedItem={{
bg: 'teal.600',
endIcon: <CheckIcon size="5" />,
}}
_focus={{
bg: 'white',
}}
marginTop={1}
onValueChange={(itemValue) => setValue(itemValue)}
>
{options.map((option) => (
<Select.Item
label={option.label}
value={option.value}
key={option.value}
style={{ display: 'flex', flexDirection: 'column', padding: 5 }}
/>
))}
</Select>
</Box>
</Box>
);
}```
You can use borderColor to specify border color and borderWidth to specify border width. To specify border color for focused inside _focus.
const Example = () => {
let [service, setService] = React.useState('');
return (
<Center>
<Box w="3/4" maxW="300">
<Select
_focus={{ borderColor: 'yellow.500' }}
borderColor="red.500"
selectedValue={service}
minWidth="200"
accessibilityLabel="Choose Service"
placeholder="Choose Service"
_selectedItem={{
bg: 'teal.600',
endIcon: <CheckIcon size="5" />,
}}
mt={1}
onValueChange={(itemValue) => setService(itemValue)}
>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<Select.Item label="Cross Platform Development" value="cross" />
<Select.Item label="UI Designing" value="ui" />
<Select.Item label="Backend Development" value="backend" />
</Select>
</Box>
</Center>
);
};
How can I keep the button at the absolute bottom of the viewable screen, while also avoiding the keyboard?
Right now the button is jumping up the screen when I open the keyboard.
I have tried using position: "absolute", bottom: "0" for the button element too, and that did not have any effect on the position of the button.
Here is my code:
return (
<KeyboardAvoidingView
behavior="padding"
style={styles.container}
>
<StatusBar style="light" />
<View style={styles.inputContainer}>
<TextInput
placeholder="First name (required)"
onChangeText={(name) =>
setFirstName((prev) => name)
}
style={styles.input}
/>
<TextInput
placeholder="Last name (optional)"
onChangeText={(lastname) =>
setFirstName((prev) => lastname)
}
style={styles.input}
/>
</View>
<Button
onPress={() => null}
title="Next"
buttonStyle={styles.button}
/>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
},
inputContainer: {
width: 350,
top: "20%",
alignSelf: "center",
},
input: {
borderBottomWidth: 3,
height: 50,
},
button: {
backgroundColor: Colors.blue,
width: 300,
marginBottom: 80,
height: 50,
alignSelf: "center",
},
});
This is how it looks when I open the keyboard:
The behavior of the avoiding view is different for both platforms.
<KeyboardAvoidingView
behavior= {Platform.OS === "ios"? "padding":"height"}
style={styles.container}
>
<StatusBar style="light" />
<View style={styles.inputContainer}>
<TextInput
placeholder="First name (required)"
onChangeText={(name) =>
setFirstName((prev) => name)
}
style={styles.input}
/>
<TextInput
placeholder="Last name (optional)"
onChangeText={(lastname) =>
setFirstName((prev) => lastname)
}
style={styles.input}
/>
</View>
<Button
onPress={() => null}
title="Next"
buttonStyle={styles.button}
/>
</KeyboardAvoidingView>
I hope this solves your problem.
Otherwise if you need more control over the keyboard behavior you can pragmatically change the default behavior using this package.
React-Native-Android-Keyboard-Adjust - I have used this package in few of the places and it helps in most of the cases.
Note: Package works on android only
I have a ToggleButton
I want the selection to look like a button
But when I put a button inside I get such an error in the console
const StyledToggleButtonGroup = withStyles((theme) => ({
grouped: {
margin: theme.spacing(0.5),
border: 'none',
},
}))(ToggleButtonGroup);
<StyledToggleButtonGroup size="medium" value={problem} exclusive onChange={handleChange}>
<ToggleButton color="red" value="technical" className={helpClasses.boxButton}>
<Button size="medium" fullWidth color="primary" variant="outlined">
{t('help.technical')}
</Button>
</ToggleButton>
</StyledToggleButtonGroup>
<DialogActions>
error in console
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
I want it to look like this
From the documentation, https://material-ui.com/components/toggle-button/
It says, you can put icons inside ToggleButton, or most likely anything other than Button.
Try follow the doc,
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>
I did it so
const classes = makeStyles((theme) => ({
boxToggleButton: {
borderRadius: '5px',
borderStyle: 'solid',
border: 1,
width: '6vw',
height: '6vw',
},
textToggleButton: {
color: colors.light.background,
fontWeight: 400,
fontSize: fontSizes.large,
},
}));
<ToggleButton value="Wrong identification ">
<Grid
container
justify="center"
alignItems="center"
item
className={classes.boxToggleButton}
>
<Typography className={classes.textToggleButton}>
{"wrongIdentification"}
</Typography>
</Grid>
</ToggleButton>;