I have a very simple question. It should be very easy. I can't change color of secondaryText in PersonaDisplay.
<Persona
text="{User.displayName}"
secondaryText={User.currentEmployee === 'true' && 'No longer works'}
size={PersonaSize.size48}
imageUrl={'/_layouts/15/userphoto.aspx?size=S&accountname=' + this.props.User.name}
className={User.currentEmployee === 'true' && 'noLongerWorks'}
/>
It does not get my noLongerWorks class properties :
.noLongerWorks {
color: "red";
}
I went over the docs but see nothing, probably missing a minor spot. I tried to add manual styling as well but no lock.
I found the answer who is interested. You don't need to add a class to change the styling, you can pass styles pros to apply to whatever props of Persona component.
<Persona
text="{User.displayName}"
secondaryText={User.currentEmployee === 'true' && 'No longer works'}
size={PersonaSize.size48}
imageUrl={'/_layouts/15/userphoto.aspx?size=S&accountname=' + this.props.User.name}
**styles={{
secondaryText: {
color: 'red',
},
}}**
/>
Related
I am trying to incorporate this WYSIWYG package into my react native project (0.64.3). I built my project with a managed workflow via Expo (~44.0.0).
The problem I am noticing is that the editor will sometimes render with the text from my database and sometimes render without it.
Here is a snippet of the function that retrieves the information from firebase.
const [note, setNote] = useState("");
const getNote = () => {
const myDoc = doc(db,"/users/" + user.uid + "/Destinations/Trip-" + trip.tripID + '/itinerary/' + date);
getDoc(myDoc)
.then(data => {
setNote(data.data()[date]);
}).catch();
}
The above code and the editor component are nested within a large function
export default function ItineraryScreen({route}) {
// functions
return (
<RichEditor
onChange={newText => {
setNote(newText)
}}
scrollEnabled={false}
ref={text}
initialFocus={false}
placeholder={'What are you planning to do this day?'}
initialContentHTML={note}
/>
)
}
Here is what it should look like with the text rendered (screenshot of simulator):
But this is what I get most of the time (screenshot from physical device):
My assumption is that there is a very slight delay between when the data for the text editor is actually available vs. when the editor is being rendered. I believe my simulator renders correctly because it is able to process the getNote() function faster.
what I have tried is using a setTimeOut function to the display of the parent View but it does not address the issue.
What do you recommend?
I believe I have solved the issue. I needed to parse the response better before assigning a value to note and only show the editor and toolbar once a value was established.
Before firebase gets queried, I assigned a null value to note
const [note, setNote] = useState(null);
Below, I will always assign value to note regardless of the outcome.
if(data.data() !== undefined){
setNote(data.data()[date]);
} else {
setNote("");
}
The last step was to only show the editor once note no longer had a null value.
{
note !== null &&
<RichToolbar
style={{backgroundColor:"white", width:"114%", flex:1, position:"absolute", left:0, zIndex:4, bottom: (toolbarVisible) ? keyboardHeight * 1.11 : 0 , marginBottom:-40, display: toolbarVisible ? "flex" : "none"}}
editor={text}
actions={[ actions.undo, actions.setBold, actions.setItalic, actions.setUnderline,actions.insertLink, actions.insertBulletsList, actions.insertOrderedList, actions.keyboard ]}
iconMap={{ [actions.heading1]: ({tintColor}) => (<Text style={[{color: tintColor}]}>H1</Text>), }}
/>
<RichEditor
disabled={disableEditor}
initialFocus={false}
onChange={ descriptionText => { setNote(descriptionText) }}
scrollEnabled={true}
ref={text}
placeholder={'What are you planning to do?'}
initialContentHTML={note}
/>
}
It is working properly.
I'm typically a back-end programmer so to assist with some of the initial work i got a project that had a template project set up. I'm trying to understand some things as my first React Native Project and i can't seem to understand what this logic is saying for bgColor? :
const navbarStyles = [
styles.navbar,
bgColor && { backgroundColor: bgColor }
];
Any explanations or references that could help? Appreciate it!
It's called short-circuiting and is a short-hand way of doing:
if (bgColor) { //implies bgColor != undefined (and also != null, != 0 etc)
backgroundColor: bgColor
}
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
I would like to create a scrollable FlatList to select only one item among a list. After the user scroll the list, the selected item will be the one in the colored rectangle (which have a fixed position) as you can see here :
Actually I'm only able to render a basic FlatList even after some researches.
Do you know how I should do that ?
I found the solution (but it's not a FlatList) !
To do that I use :
https://github.com/veizz/react-native-picker-scrollview.
To define the background of the current selected items I added a new props highLightBackgroundColor in the ScrollPicker Class in the index file of react-native-picker-scrollview :
render(){
...
let highLightBackgroundColor = this.props.highLightBackgroundColor || '#FFFFFF';
...
let highlightStyle = {
...
backgroundColor: highLightBackgroundColor,
};
...
How to use it :
<ScrollPicker
ref={sp => {
this.sp = sp;
}}
dataSource={['a', 'b', 'c', 'd', 'e']}
selectedIndex={0}
itemHeight={50}
wrapperHeight={250}
highLightBackgroundColor={'lightgreen'}
renderItem={(data, index, isSelected) => {
return (
<View>
<Text>{data}</Text>
</View>
);
}}
onValueChange={(data, selectedIndex) => {
//
}}
/>
How it looks without others customizations:
You can implement the same setup with the very popular react-native-snap-carousel package, using the vertical prop. No need to use a smaller, poorly documented/unmaintained package for this.
I've changed 'medium' font size with loadTheme like such:
loadTheme({
fonts: {
medium: {
fontFamily: fonts.fontFamily,
fontSize: fonts.fontSize.regular
}
}
)
However, the base Checkbox styles are loading font-size directly from FontSizes here:
https://github.com/OfficeDev/office-ui-fabric-react/blob/ace874ab7e56188a7d6de081915c63025def4e05/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts#L223
I know I can override this on the component itself, but it seems like I shouldn't have to. Is this a bug? Shouldn't the component use theme font size by default?
Yes, Checkbox should be reading font from theme. In fact, in the fabric-7 branch, it does:
https://github.com/OfficeDev/office-ui-fabric-react/blob/14b1d77fc97fffb1c333a3601d62c3e30c4cf3b0/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts#L136
Fabric 7 release is planned for May. Meanwhile you should be able to apply your own styling making use of the loadTheme call like this:
const checkboxStyling = (props) => {
return {
text: { ...props.theme.fonts.medium }
}
}
...
<Checkbox label='test' styles={checkboxStyling} />
This works in the following CodePen: https://codepen.io/jasongore/pen/JVwJGO